Блог

Мне нужно обновить текущее значение состояния реакции на основе его текущего значения. Однако использование текущего состояния вызовет предупреждение: React Hook useEffect has a missing dependency . Как я могу обновить состояние?

Для простоты предположим, что мне нужно подсчитать, сколько раз обновляется другое состояние:

 [myState, setMyState] = useState("");
[counter, setCounter] = useState(0);

useEffect(()=>{
 setCounter(counter 1);
},[myState]) // React Hook useEffect has a missing dependency: 'counter'

 

Однако я не могу добавить counter среди зависимостей, так как эффект использования будет входить в бесконечный цикл (так как крючок будет снова активирован из-за counter изменения).

Лучший способ реализовать этот тип изменений-использовать обратный вызов внутри setState метода. Используя обратный вызов, мы можем получить доступ к текущему значению нашего состояния без необходимости напрямую ссылаться на объект, содержащий состояние. Таким образом, предупреждение не выдается, и счетчик может быть реализован напрямую.

 [myState, setMyState] = useState("");
[counter, setCounter] = useState(0);

useEffect(()=>{
 setCounter(currentCounter => currentCounter 1);
},[myState]) // No warning here

 

Или если вам нужны более сложные действия:

 useEffect(()=>{
 setCounter(currentCounter => {
   //do stuff
   return currentCounter 1
 });
},[myState]) // No warning here

 

Полная документация: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous