Question

我有两个 useEffect 钩子，它们都将在 startTime/endTime 状态发生变化时运行。

useEffect(() => {
    if (selectedProduct) {
        fetch(...)
        .then(res => res.json())
        .then(res => setMyState(res.data));
    }
}, [selectedProduct, startTime, endTime]);

useEffect(() => {
    if(selectedStep){
        console.log(myState); //this runs twice, once for the old state and once for the new state, after above useEffect's setState is complete
    }
}, [selectedStep, startTime, endTime, myState]);

环顾四周，我了解到这可能是因为 React 进行了某种批处理以提高性能，使得 setState 本质上是异步的。此外，fetch 调用也将是异步的，因此设置新状态需要时间。

从我搜索的内容来看，我发现 a callback 使用 class based 的 React 组件有 setState，但由于我使用的是钩子，我不知道该怎么做。我可以在第一个代码中移动第二个 useEffect 代码，但这需要一些难看的 if-else 条件，因为我需要检查 selectedStep 是否没有改变，然后我可以使用 { {1}} 直接。

有没有更好的方法来做到这一点？

Answer 1

这不是批处理操作或类似的东西，它只是它的工作原理：当 startTime 或 endTime 更改时，每个钩子都会被执行，并且由于第一个更改 {{1 }}，您的第二个将再次调用该更改。

给你几个选择

按照您的描述组合钩子，即使它涉及条件逻辑。
根据您使用 myState 执行的操作，您可以使第二个钩子使用 myState 的回调形式，它接收当前状态值作为参数。
（如果可能）删除第二个 setMyState 中对其他状态项的依赖，以便它仅在 useEffect 更改时执行

尽管你说这会涉及到一些 myState/if，但如果你做不到 #3，我会倾向于 #1。

在另一个 useEffect 钩子修改相同的状态之后，如何在 useEffect 钩子中获得正确的状态？

1 个答案: