时间戳

首页 > 解决方案 > 反应钩子，更新一个状态以响应另一个状态更新

reactjs - 反应钩子，更新一个状态以响应另一个状态更新

问题描述

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

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

    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>
      );
    }

标签： reactjsstateuse-effect

解决方案

因此，您希望每次数组长度更改时都更新“第二状态” （长度）。为此，您需要一个将数组长度作为依赖项 ( arr.length) 的效果，然后将长度设置为该值。

还添加了对clickHandler函数的更改，因为状态是从先前的状态计算出来的（查看此以获得更多详细信息）

这就是最终代码的样子

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>
  );
}

推荐阅读