當方法從子組件觸發時，父組件中的狀態不會更新

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 顏色值。