React hooks - 等待状态更新

Posted 2023-02-22

【中文标题】React hooks - 等待状态更新

【英文标题】：React hooks - wait until the state has been updated

【发布时间】：2020-12-28 01:42:56

【问题描述】：

我正在使用 useState() 钩子，我发现我的应用程序有一个错误，因为设置值是异步的。所以如果我有这样的代码：

 const [data, setData] = useState([])
  useEffect(() => 
    const getData = async () => 
      const res = await fetchData()
      console.log(data); // []
      setData(res.data.hits);
      console.log(res.data.hits); // Array full of objects
      console.log(data); // Still []
    
    getData()
  , [fetchData]);

只有在实际设置了新状态后，我才能执行一些特定的逻辑？

【问题讨论】：

即使它不是异步的，data 仍然用const 声明 - 它不会改变

你想要什么样的“执行某事”？副作用，例如 API 调用？还是您想更改渲染的内容或其他内容？

添加观看data的新效果

为什么不使用条件渲染？一旦数据可用，它就会执行。

@CertainPerformance setState 方法在状态更新时有回调。我正在寻找类似的东西。

【参考方案1】：

您可以使用useEffecthook：

useEffect(() => 
   //your code
, [data]);

这将在每次data 更改时触发内部内容。

【讨论】：

一般来说 - 是的，这是正确的答案。但我的具体问题是我有另一个 useEffect() 取决于其他不同的属性，当它被触发时，它仍然具有数据变量的旧状态。

也许你可以简单地在你的const res = await fetchData();之后触发一个函数，以res作为参数来执行你想要的逻辑？

不是真的，因为我要执行的逻辑是另一个 useEffect() 调用，它具有其他变量作为依赖项。

并添加 data 作为其他 useEffect 的依赖项？

我不希望每次“数据”更改时都运行另一个 useEffect。