如何更改传递给axios路由的params值以更改数据反应本地

Question

我正在构建一种图书应用程序(《古兰经》(。。。用户会去一个苏拉的列表，每个苏拉包含大约5-50页。我设法将用户从列表导航到每个苏拉的第一页。。通过获取api请求，将显示第一页的数据，这是showScreen 中的代码

const [quran, setQuran] = useState([]);
const page = navigation.getParam('page');
const name = navigation.getParam('name');
let pageNumber = page;
useEffect(() => {
Quran(); 
}, []);

const Quran = async () => {
const response = await QuranApi.get(`/${pageNumber}/quran-uthmani`);
setQuran(response.data.data.ayahs);
}

让我们假设第一页是第200页，我正在寻找一些方法，当用户点击时，转到第201或199页(下一页或上一页(，并重新绘制数据，为他显示请求的页面

我需要一些帮助，请提前感谢

Answer 1

基本上，您需要在"标记部分"中添加某种按钮或任何元素，这将触发下一个/上一个操作。例如：

// The following line makes react listen for changes in page state variable.
// If you use setPage() anywhere, react will auto update all the components
// where page variable is used. You don't need to manually do it
const [page, setPage] = useState(nav.getParam('page'))
// ....
// This function does exactly that
const handleClick = event => { 
if(event.target.value === 'next-page')  // If next button was pressed
setPage(page + 1) // We increment the page state variable by 1
else if(event.target.value === 'prev-page') // If prev button was pressed
setPage(page - 1) // We decrement the page state variable by 1
// By doing so, react will auto update every element which uses this variable
}
// .....
// We tell react, if [page] state variable changes by user clicking
// next or previous button, fetch data from the api using updated
// page number and using that, we update the [quran] variable using
// 'setQuran()' function
useEffect(async () => {
const response = await QuranApi.get(`/${page}/quran-uthmani`)
setQuran(response.data.data.ayahs)
}, [page] ); 
//......
// markup section
return(
//....
<Button onClick={handleClick} value="next-page">Next Page {page + 1}</Button>
<Button onClick={handleClick} value="prev-page">Prev Page {page - 1}</Button>
//....
)

Answer 2

谢谢亲爱的@Sayed它终于工作了，但我必须用同样的想法做一些修改才能成为

const [page, setPage] = useState(navigation.getParam('page'))
const handleRightClick = () => {
setPage(parseInt(page) + 1)
};
const handleLeftClick = () => {
setPage(parseInt(page) - 1);
}
useEffect(() => {
return () => {
console.log("cleaned up");
};
}, []);
useEffect(() => {
Quran();
}, [page]);
<Button title = 'Next Page' onPress = {handleRightClick}/>
<Button  title = 'Prev-page' onPress ={handleLeftClick} />

所以它在这种情况下工作得很好，没有错误

Answer 3

试试这个小改动。。。

const [page,setPage]=useState(nav.getParam('page'))
useEffect(() => { 
Quran(); 
}, [page]); 

通过将一个空数组作为第二个参数传递给useEffect函数，可以告诉react只执行一次副作用(在装载时(。

但是，如果该数组包含要监视的状态变量列表。React只会在该数组中的某个项发生更改时重新运行副作用。

上面提到的useEffect的更改会使useEffect对传递给useEffect数组的状态变量(页面(的任何更改都敏感。当您在url中传递新的页码作为参数时，会导致每次设置页面状态变量时都调用useEffect。

希望这能有所帮助！