как изменить значение параметров, переданное в маршрут ax ios, чтобы изменить реакцию на данные?

Question

Я создаю своего рода книжное приложение (Священный Коран) ... пользователь будет go для списка сур, каждая сура содержит от 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, я ищу какой-то способ, поэтому, когда пользователь нажимает go на страницу 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 повторно запустит побочный эффект, только если один из элементов в этом массиве изменится.

Вышеупомянутое изменение в useEffect сделает ваш useEffect чувствительным к любым изменениям в переменной состояния (странице), переданной в useEffect. массив. Если вы передадите новые номера страниц в URL-адресе в качестве параметра, это приведет к вызову useEffect каждый раз, когда установлена ​​переменная состояния страницы.

Надеюсь, это поможет!