React.js Значения useState не совпадают асинхронно

#javascript #reactjs #redux #use-state

#javascript #reactjs #сокращение #use-state

Вопрос:

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

 // userData is from Redux store
const {userData} = props 

const [installed, setInstalled] = useState(userData.installed)  // installed: boolean

console.log(userData.installed) // returns true
console.log(installed) // returns false
console.log(userData) // installed: true

Причина, по которой я использую useState, заключается в том, что я использую его для отображения кнопки, которая будет переключена, а также для отображения индикатора, включена она или нет.

 <Button onClick={() => setInstalled(!installed) />

1. Это установило бы только установленный при монтировании, никакие дальнейшие изменения не применялись бы к переменной состояния. Почему вы хотите скопировать значение prop в state?

2. Вероятно, это installed изначально false перед изменением на true , но после инициализации useState игнорирует значение, переданное в качестве аргумента.

3. Насколько я помню, useState может обрабатывать асинхронные функции, поэтому он будет обновляться при отправке ответа обратно. В 90% случаев я не вижу никаких проблем, и обычно он отображается правильно, но тот же компонент отображает то, что я показал выше. Также отредактировал OP для контекста.

4. для обработчика щелчков вы должны сделать () => setInstalled(prevInstalled => !prevInstalled)

Ответ №1:

Я рекомендую использовать useEffect для просмотра состояния внутри вашего хранилища Redux, а затем обновлять локальное состояние на основе этих изменений :

 const [userData] = props ;
const [installed, setInstalled] = useState(userData.installed)

useEffect(() => {
  setInstalled(userData.installed)
},[userData])

1. Это решило проблему. Если я правильно понимаю, useEffect вызывается при монтировании компонента. Затем он обновляет значение installed using userData . Это связано с тем, что начальное значение useState может быть неправильным, поскольку это асинхронная функция. Верно?

2. он отслеживает изменения пользовательских данных и вызывается при монтировании и при изменении пользовательских данных