React掛鈎：使用useEffect時無法獲取狀態更新

Question

混合useState和useEffect掛鈎時出現問題。 我似乎無法在onReady()引用新的query狀態。

function Foo() {
  const [ query, setQuery ] = React.useState('initial query');

  React.useEffect(() => {
    myLibClient.onReady(onReady)
  }, []);

  function onReady() {
    const newQuery = myLibClient.createQuery({ options });
    setQuery(newQuery);
    console.log(query); // initial query :(
  }

  return null;
}

誰能看到我在做什么錯或解釋為什么這行不通？

Answer 1

這里的問題是，像this.setState在反應基於類的元件， setQuery功能也設置狀態異步。

請參閱參考react docs和RFC：為什么它是異步的？

因此，如果您嘗試在設置狀態后立即訪問該值，則將獲得較舊的值。

您可以在此處驗證此行為。 https://codesandbox.io/s/2w4mp4x3ry 。 （請參閱名為Counter.js的文件）​​您將看到counter的前后值是相同的。

如果要訪問更新的值，則可以在下一個渲染周期中訪問它。 我創建了另一個示例，您可以看到正在呈現新的查詢值。

https://codesandbox.io/s/8l7mqkx8wl （請參閱名為Counter.js的文件）