React.js useState 值不异步匹配

Question

我遇到一个奇怪的问题，有时传递给 useState 的值与 useState 的变量不同。这种情况每次都发生在同一个 UI 组件上，而其他组件则没有问题。只是想仔细检查一下我是否做错了什么。

// 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) />

Answer 1

我建议使用 useEffect 来观察 Redux store 中的状态，然后根据这些变化更新本地状态：

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

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

React.js useState 值不异步匹配

React.js useState values do not match asynchronously

javascript

reactjs

redux

use-state