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

Question

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

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

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

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

最好的。

Answer 1

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

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

一旦颜色值完成更改，useEffect 将 console.log 颜色值。