Блог

Главная - Вопросы по программированию - Как добавить обратный звонок, когда 2 состояния обновляются одновременно с помощью крючков?

Как добавить обратный звонок, когда 2 состояния обновляются одновременно с помощью крючков?

#reactjs #react-native #react-hooks

Вопрос:

Как добавить обратный вызов, когда одновременно обновляется более 2 состояний. пожалуйста, проверьте приведенный ниже код компонента класса, где я добавляю обратный вызов, когда эти состояния будут успешно обновлены.

 this.setState({liveMatches: finalMatches, isLoading: false, runningFetch: false, disbleSportsSwitch:false}, ()=> this.startListener());

Но теперь я Что бы преобразовать этот код в крючки внутри функционального компонента.

 Useeffect(()=>{
  startListener());
},[liveMatches,isLoading,runningFetch,disbleSportsSwitch])

Пожалуйста, проверьте, правильно это или нет ?

Комментарии:

1. Также рассмотрите возможность использования useReducer , если у вас есть несколько связанных битов состояния, как это может показаться из вашего вопроса.

Ответ №1:

Ближе всего к тому, что у вас есть в настройке класса, будет:

 const [liveMatches, setLiveMatches] = useState(/* default value */);
const [isLoading, setIsLoading] = useState(/* default value */);
const [runningFetch, setRunningFetch] = useState(/* default value */);
const [disbleSportsSwitch, setDisbleSportsSwitch] = useState(/* default value */);

// later
const onSomeEvent = () => {
  setLiveMatches(finalMatches);
  setIsLoading(false);
  setRunningFetch(false);
  setDisbleSportsSwitch(false);
  this.startListener();
};

onSomeEvent зависит от контекста вашего приложения. Это может быть загрузка страницы или нажатие кнопки. Это невозможно сказать из вашего вопроса

Если эти 4 — кратные части состояния тесно связаны (liveMatches, isLoading и т. Д.), Вы Также Можете Рассмотреть useReducer -но я бы начал с useState того, чтобы вам было удобно с крючками (или если это станет слишком сложным)

Ответ №2:

Код, который вы указали выше, добавит обратный вызов при каждом изменении состояния.(пожалуйста, правильно укажите массив зависимостей)

Но вы можете определить эффект, вызывающий зависимость, введя свой пользовательский хук, и если 2 или более 2 найденных изменений, добавьте обратный вызов

Метки: ,