связать состояние с другим состоянием в хуке useState

Question

Я хочу иметь состояние B, значение которого зависит от состояния A, и когда значение состояния A обновляется, значение состояния B обновляется впоследствии.

Проблема заключается в том, что @Atin Singh заявил здесь изменение несколько состояний в реакции 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]. Добавьте этот блок, чтобы при обновлении 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