reactjs - 在 useState Hook 中将一个状态与另一个状态相关联

Question

我想要一个状态 B，它的值取决于状态 A，当状态 A 值更新时，状态 B 值随后更新。

问题就像@Atin Singh 在这里所说的 changing multiple states in react js useState() hook

const [x, setX] = useState(0)
const [y, setY] = useState(x) // this is just to initialize an initial value to your state y so it will be once set to the value of x and then it doesn't depends on x//

状态 B 的值初始化为状态 A 的值，并且不依赖于状态 A 的值。

但是有没有办法让状态 B 的值依赖于状态 A 的值？

这是简化的代码:

export default function App() {
  const [a, setA] = useState("");
  const [b, setB] = useState(a);

  const updateA = () => {
    setA("Hi");
  };

  useEffect(() => {
    console.log("a: ", a);
    console.log("b: ", b);
  });

  return (
    <div className="App">
      <button onClick={updateA}>Update State A</button>
    </div>
  );
}

您可以从这里编辑代码:
https://codesandbox.io/s/nifty-sun-ml843?fontsize=14&hidenavigation=1&theme=dark

Answer 1

您可以将 useEffect 与 Dependency 一起用作 [a]。添加这个 block ，所以无论何时a得到更新，这个 useEffect 将运行并设置 B 的值

   useEffect(() => {
        setB(a);
      },[a]);

完整代码:

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

export default function App() {
  const [a, setA] = useState("");
  const [b, setB] = useState(a);

  const updateA = () => {
    setA("Hi");
  };

  useEffect(() => {
    setB(a);
  },[a]);

  useEffect(() => {
    console.log("a: ", a);
    console.log("b: ", b);
  });

  return (
    <div className="App">
      <button onClick={updateA}>Update State A</button>
    </div>
  );
}

输出:

a:  "" 
b:  "" 
a:  Hi 
b:  "" 
a:  Hi 
b:  Hi