React hooks - 等待状态更新答案

【问题标题】：React hooks - wait until the state has been updatedReact hooks - 等待状态更新
【发布时间】：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 方法在状态更新时有回调。我正在寻找类似的东西。

标签： javascript html reactjs typescript

【解决方案1】：

您可以使用useEffecthook：

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

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

【讨论】：

一般来说 - 是的，这是正确的答案。但我的具体问题是我有另一个 useEffect() 取决于其他不同的属性，当它被触发时，它仍然具有数据变量的旧状态。
也许你可以简单地在你的const res = await fetchData();之后触发一个函数，以res作为参数来执行你想要的逻辑？
不是真的，因为我要执行的逻辑是另一个 useEffect() 调用，它具有其他变量作为依赖项。
并添加 data 作为其他 useEffect 的依赖项？
我不希望每次“数据”更改时都运行另一个 useEffect。