仅当状态为 true 时才应用提取回调

Question

如果用户单击我的 React 应用程序中的按钮，则会从 API 获取某些数据。如果在 API 调用完成之前单击了另一个按钮，则不应应用回调函数。不幸的是，状态(在我的代码示例中为"加载"(在回调中没有正确的值。我做错了什么？

const [apartments, setApartments] = useState(emptyFeatureCollection);
const [loading, setLoading] = useState(true);
function getApartments() {
fetch(`https://any-api-endpoint.com`)
.then(response => response.json())
.then(data => {
if (loading) setApartments(data);
})
.catch(error => console.error(error));
}
}
useEffect(() => {
setLoading(false);
}, [apartments]);
function clickStartButton() {
setLoading(true);
getApartments();
}
function clickCancelButton() {
setLoading(false);
}

Answer 1

这里的问题是回调代码：

data => {
if (loading) setApartments(data);
}

在getApartments()的原始闭包上下文中调用，当loading为假时。

这意味着回调只会看到或"继承"先前的loading状态，并且由于setAppartments()依赖于更新的loading状态，因此永远不会应用来自网络请求的数据。

需要对代码进行最小更改的简单解决方案是将回调传递给setLoading()。这样做可以让您访问当前loading状态(即组件的状态，而不是执行回调时的闭包状态(。这样，您就可以确定是否应更新公寓数据：

function getApartments() {
/* Block fetch if currently loading */
if (loading) {
return;
}
/* Update loading state. Blocks future requests while this one 
is in progress */
setLoading(true);
fetch(`https://any-api-endpoint.com`)
.then(response => response.json())
.then(data => {
/* Access the true current loading state via callback parameter */
setLoading(currLoading => {
/* currLoading is the true loading state of the component, ie
not that of the closure that getApartnment() was called */
if (currLoading) {
/* Set the apartments data seeing the component is in the 
loading state */
setApartments(data);
}
/* Update the loading state to false */
return false;
});
})
.catch(error => {
console.error(error);
/* Reset loading state to false */
setLoading(false);
});
}

这里有一个工作示例供您查看。 希望对您有所帮助！