如何更改传递给axios路由的params值以更改数据反应本机? [英] how to change params value passed to axios route to change data react native?

问题描述

我正在构建一种图书应用程序(《古兰经》)...用户将获得一份《古兰经》的清单，每本《古兰经》包含约5至50页.我设法将用户从列表中导航到每个Surahs的首页.通过获取api请求数据，将显示首页的信息，这是showScreen中的代码

I am building a kind of book app (Holy Quran )... user will go for a list of Surahs, each Surah contains around 5 - 50 pages. I managed navigating user from the list to first page of each Surahs.. and through getting an api request data for first page will be shown and this is the code in the 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页(下一页或上一页)并重新获取数据，以便向他显示请求的页面

so let's imagine that first page is page number 200, I am looking for some way so when user clicks go to page 201 or 199 (next or previous) and refetching the data so show for him requested page

在这里我需要一些帮助，在此先感谢

I need some help here please and thanks in advance

推荐答案

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

Basically you need to add some sort of button or any element in your 'markup section' which will trigger next/previous action. For example:

// 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>
    //....
)

这篇关于如何更改传递给axios路由的params值以更改数据反应本机?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！