使用钩子更新依赖于另一个状态的 React 状态答案

【问题标题】：Update React State dependent from another state with hooks使用钩子更新依赖于另一个状态的 React 状态
【发布时间】：2021-10-11 21:22:07
【问题描述】：

我想更新一个依赖于另一个状态变化的状态。例如，我有状态一，如果状态一发生变化，我想根据状态一的变化来改变状态二。这样做的最佳方法是什么？我准备了两个例子。

示例 1
这里我在状态1的状态改变回调里面改变了State2。

const DependentStateExample1 = () => {
  const [state1, setState1] = useState(0);
  const [state2, setState2] = useState(0);

  const changeState1 = () => {
    setState1((prev) => {
      const newState = prev + 5;
      setState2((prevState2) => prevState2 + newState);
      return newState;
    });
  };

  return (
    <div>
      <span>{state1}</span><span>{state2}</span>
      <button onClick={changeState1}>Change State 1</button>
    </div>
  );
};

示例 2
这里我使用了useEffect，每次state1变化时都会执行。

const DependentStateExample2 = () => {
  const [state1, setState1] = useState(0);
  const [state2, setState2] = useState(0);

  const changeState1 = () => {
    setState1((prev) => prev + 5);
  };

  useEffect(() => setState2((prev) => prev + state1), [state1]);

  return (
    <div>
      <span>{state1}</span>
      <span>{state2}</span>
      <button onClick={changeState1}>Change State 1</button>
    </div>
  );
};

两种方法都给我相同的结果，但哪一种更好，或者有更好的方法解决这个问题？谁能解释一下？

【问题讨论】：

对使用 2 个不同的状态有什么特殊要求吗？为什么不能在单一状态下使用？
不，使用 2 个不同的状态没有特别的原因。使用单个状态实际上是一个好主意，那么我可以使用 useReducer 代替 useState。但是无论如何，是否仍然可以每个状态使用 1 个状态？
有什么消息吗？

标签： reactjs react-hooks

【解决方案1】：

让我们从您知道第一个状态和第二个状态之间的关系这一事实开始，因此您可以将其取出并编写代码以产生相同的结果，而不是在代码中编写这种逻辑依赖关系，但是这样 React 就不必“等待”直到 setState 完成：

setState1(oldState1 => oldState1 + 5);
setState2(oldState2 => oldState1 + oldState2 + 5); // we know setState is async so remember on the second line you don't have yet setState1 completed

该原则可以扩展到状态之间更复杂的依赖关系。

【讨论】：