Блог

Я пытаюсь увеличить состояние страницы при нажатии кнопки. Когда я нажимаю кнопку, состояние равно 1. Он работает только после следующего нажатия.

   const { state, fetchMissions } = useContext(MissionContext);
  const [page, setPage] = useState(1);

  const loadMoreData = () => {
    setPage(page   1);
    if (state.missions amp;amp; page !== 1) {
      fetchMissions(page);
    }
  };

      <Button title="load more data" onPress={loadMoreData}></Button>
 

Также используется navigationEvents

  <NavigationEvents onWillFocus={() => fetchMissions(page)} />
 

Я что-то упускаю? Спасибо.

setState является асинхронным. Значение не нужно обновлять в следующей строке.

Вызовы setState являются асинхронными — не полагайтесь на this.state для отражения нового значения сразу после вызова setState

Источник: reactjs.org , Почему setState дает мне неправильное значение?

Я бы рекомендовал использовать useEffect .

 const { state, fetchMissions } = useContext(MissionContext);
const [page, setPage] = useState(1);

const loadMoreData = () => {
  setPage(page   1);
};

useEffect(()=>{
   // this is called only if the variable `page` changes
   (state.missions amp;amp; page !== 1) amp;amp; fetchMissions(page);
}, [page]);

 

По умолчанию эффекты запускаются после каждого завершенного рендеринга, но вы можете включить их только при изменении определенных значений.

Источник: reactjs.org , Эффект использования

Поэтому я ввел [page] в качестве второго аргумента указание React, когда вызывать эту часть кода.