时间戳

首页 > 解决方案 > 当子组件触发方法时，父组件中的状态不会更新

reactjs - 当子组件触发方法时，父组件中的状态不会更新

问题描述

我的反应代码中有一个问题，如果有人可以帮助我，我会很高兴。我有一个发出该方法的子组件，并在我的父组件中使用该方法。同样在父组件中，有一个状态，每当方法发出时，我都想更改状态的值。这是代码：

 const [color, setColor] = useState("red");

const selectColor= (colorName) => {
setColor("blue");
console.log("color : ", color);
 }
  <Child onChangeColor={selectColor} />

这就是问题所在。当我调用该方法时，我将颜色的值更改为“蓝色”，但第一次该值没有改变，但第二次再次调用该函数时，该值更新为“蓝色”。我哪里做错了？如果有人可以向我解释，我将不胜感激。

最好的。

标签： reactjsreact-hooks

解决方案

它按预期工作。SetColor 不会立即更新状态，因此 console.log 将记录以前的值。您需要像这样记录它：

  useEffect(() => {
console.log(color)
  }, [color])

一旦颜色值完成更改，useEffect 将控制台记录颜色值。

推荐阅读