在useState钩子中把一个状态和另一个状态关联起来。

我想让一个状态B的值依赖于状态A,当状态A的值更新时,状态B的值也随之更新。

问题就像 @Atin Singh 在这里所说的那样 在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.iosnifty-sun-ml843?fontsize=14&hidenavigation=1&主题=dark。

解决方案:

你可以使用Dependency的Effect作为[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 

给TA打赏
共{{data.count}}人
人已打赏
未分类

Tomcat服务器无响应 "http-nio-80-Acceptor-0"

2022-9-23 11:22:57

未分类

打印功能中的冲洗是什么?[重复]

2022-9-23 11:22:59

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索