反应钩子，更新一个状态以响应另一个状态更新答案

【问题标题】：React hooks, update one state in response of another state update反应钩子，更新一个状态以响应另一个状态更新
【发布时间】：2021-06-02 14:04:00
【问题描述】：

如何从第一个状态产生第二个状态，当第一个状态发生变化时，使第二个状态做出反应以响应更新？

它有效，但我不确定这样做有多可靠，有什么建议吗？谢谢。

    export default function App() {
      const [arr, setArr] = useState([1, 2, 3, 4, 5]);
      const [length, setLength] = useState(arr.length);
      console.log(arr)
    
      const clickHandler = () => {
        setArr([...arr, arr.length+1])
      };
    
      useEffect(() => {
        setLength(length + 1)
      }, [arr])
    
      return (
        <div className="App">
          <h2>{length}</h2>
          <button onClick={clickHandler}>click</button>
        </div>
      );
    }

【问题讨论】：

这个例子很不现实，你可以查看arr.length。为什么需要这样做？
我想要它用于其他实际案例，只是那个案例有点复杂且代码很长，我正在通过简化它来测试问题
我猜你拥有它的方式很好 - 通常虽然状态变化可以“同时”发生。而不是使用效果来链接状态更新，也就是在 clickhandler 中设置两个状态

标签： reactjs state use-effect

【解决方案1】：

所以您希望每次数组长度发生变化时更新'第二状态'（长度）。为此，您需要一个将数组长度作为依赖项 (arr.length) 的效果，然后将长度设置为该值。

还添加了对 clickHandler 函数的更改，因为状态是根据之前的状态计算的（请查看 this 了解更多详细信息）

这就是最终代码的样子

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [arr, setArr] = useState([1, 2, 3, 4, 5]);
  const [length, setLength] = useState(arr.length);
  console.log(arr);

  const clickHandler = () => {
    setArr((arr) => [...arr, arr.length + 1]); // Change #1
  };

  useEffect(() => {
    setLength(arr.length); // Change #2
  }, [arr.length]);

  return (
    <div className="App">
      <h2>{length}</h2>
      <button onClick={clickHandler}>click</button>
    </div>
  );
}

【讨论】：