React.js useState 值不异步匹配答案

【问题标题】：React.js useState values do not match asynchronouslyReact.js useState 值不异步匹配
【发布时间】：2020-12-13 10:51:34
【问题描述】：

我遇到了一个奇怪的问题，有时传递给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) />

【问题讨论】：

这只会设置安装在挂载上，不会对状态变量进行进一步的更改。为什么要将 prop 值复制到 state 中？
installed 在更改为true 之前可能最初是false，但是一旦初始化，useState 就会忽略作为参数传递的值。
如果我记得，useState 可以处理异步函数，因此它会在响应被发回时更新。 90% 的情况下，我看不到任何问题，并且通常会正确呈现，但同一个组件会显示我上面显示的内容。还为上下文编辑了 OP。
对于你应该做的点击处理程序() => setInstalled(prevInstalled => !prevInstalled)

标签： javascript reactjs redux use-state

【解决方案1】：

我建议使用useEffect 观察 Redux 存储中的状态，然后根据这些更改更新本地状态：

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

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

【讨论】：

这解决了这个问题。如果我理解正确，则在安装组件时会调用 useEffect。然后它使用userData 更新installed 的值。这是因为 useState 的初始值可能不正确，因为它是一个异步函数。对吗？
它观察用户数据的变化，并在挂载时调用它以及用户数据何时发生变化