由React建立的竞争条件.StrictMode双发射函数

Question

我想我理解为什么React.StrictMode导致函数被调用两次。然而，我有一个useEffect从我的api加载数据:

useEffect(() => {
async function fetchData() {
const data = await getData();
setData(data);
}
fetchData();
}, []);

在我的getData()函数中，我调用维护脚本cullRecords()，该脚本在返回数据之前通过删除超过一定年龄的记录来清理我的数据:

async function getData(){
let results = await apiCall();
cullRecords(results);
return results;
}

问题在于:React.StrictMode触发getData()函数两次，加载apiCall()两次，触发cullRecords()两次。然而，当第二个cullRecords()下标触发时，我的API抛出一个错误，因为这些记录已经消失了。

虽然这不是世界末日，但我很好奇我是否做错了什么，或者这只是一个边缘案例，而不用担心。

Answer 1

你也可以在这里阅读:https://beta.reactjs.org/learn/synchronizing-with-effects how-to-handle-the-effect-firing-twice-in-development

同样的问题也可能发生，如果用户离开/访问路由很快(这是什么开发模式模拟这里)。当UI组件正在呈现时，调用后端维护脚本可能不是最好的方法。

Answer 2

根据api上发生的竞争条件，实现debing方法很有用，如下所述。

debounce()函数强制一个函数等待一定的时间再次运行前的时间。这个函数是用来限制数量的函数被调用的次数

您可以在服务器端或客户端使用debouting，因为它们的实现非常相似。