reactjs - useState 未按预期更新

Question

我有两个组件，一个放在另一个里面。子组件打印父组件传递的状态，并使用 useEffect 更新一次状态。在父组件中，我使用 setState(具有 bool 值的对象)并将状态传递给所有子组件。

父组件:

export default function App() {
  const [state, setState] = useState({
    one: false,
    two: false,
    three: false
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ChildComponent
        value={state.one}
        setState={(val) => setState({ ...state, one: val })}
      />
      <ChildComponent
        value={state.two}
        setState={(val) => setState({ ...state, two: val })}
      />
      <ChildComponent
        value={state.three}
        setState={(val) => setState({ ...state, three: val })}
      />
    </div>
  );
}

子组件:

import { useEffect } from "react";

export default function ChildComponent({ value, setState }) {
  useEffect(() => {
    console.log("updated");
    setState(!value);
  }, []);
  return (
    <>
      <p>{value ? "true" : "false"}</p>
    </>
  );
}

这两个组件都非常简单，我希望看到所有 bool 值都为真(因为子组件正在修改状态)。问题是只有状态上的最后一项正在更新。有人可以解释我的代码有什么问题吗？ A working example

Answer 1

状态更新取决于状态的先前值，您需要传递一个回调作为您的 setState 的参数。

您需要这样做:

setState={(val) => setState(prev => ({ ...prev, one: val }))}

在您当前的实现中，您传播的是状态的初始值，其中所有内容都是 false，而不是状态的当前值。

例子: https://codesandbox.io/s/usestate-callback-1oq2n?file=/src/App.js