反应应用程序中的删除按钮缺少第一次点击页面加载

Question

我有一个显示疾病 ID 列表的小 React 应用程序。

我有一个神秘的问题，我一直在试图解决，但到目前为止还没有成功。

我有这组表列，你在下面看到。

这是一个小表，只包含一列 ID 和一个带有两个按钮的列：删除 |保持

按钮的作用是这样的：

当您单击"保留"时，没有任何反应，疾病保留在表中。

但是，如果您单击"删除"，则该疾病将立即从列表中删除，而无需重新加载任何页面。

单击删除将触发一个名为 handleReremove 的函数。 此函数首先调用 updateDisease，它设置疾病对象的"isRemoved"值。 然后它调用fetchAndUpdate来获取删除该疾病的新列表。

我遇到的问题是这个。

当我第一次加载页面时，当我第一次单击"删除"时，页面上没有任何反应。

但是，我确实在"handleRemove"函数中看到控制台.log消息以及正确的疾病对象。

但是第二次我单击删除时，会话的其余部分一切正常。

我已经一遍又一遍地测试了这个，移动了东西，但我总是遇到这个问题。

我希望另一双眼睛可以看看，看看他们是否发现了可能导致这种行为的东西。

const updateDisease = async (disease, newIsRemovedVal) => {
disease.isRemoved = newIsRemovedVal;
await axios({
method: "PUT",
url: "api/diseases/" + disease.id,
data: JSON.stringify(disease),
headers: { 'Content-Type': 'application/json; charset=utf-8' }
});
};
const handleRemove = (e) => {
console.log("Remove!");
updateDisease(e, 1);
fetchAndUpdate();
}
const handleKeep = (e) => {
conaole.log("Keep!");
updateDisease(e, 0);
}
const columns = React.useMemo(
() => handleRemove [
{
Header: 'Disease List',
columns: [
{
Header: 'ID',
accessor: 'id',
},
{
Header: 'Remove/Keep',
Cell: ({ row }) =>
<div><Button onClick={() => handleRemove(row.original)}>Remove</Button>&nbsp
<Button onClick={() => handleKeep(row.original)}>Keep</Button></div>
}
]
}
],
[handleRemove, handleKeep]
)
const [data, setData] = React.useState([]);
const fetchAndUpdate = useCallback(() => {
diseaseData(false).then(res => {
setData(res.data);
});
}, [])
React.useEffect(() => {
fetchAndUpdate()
}, [fetchAndUpdate]);

如果您有任何想法，请告诉我。

谢谢！

Answer 1

由于您正在updateDisease(e, 1);执行异步请求，因此您需要等到请求完成才能再次从服务器获取数据

当你像下面这样调用 updateDisease 和 fetchAndUpdate 时，即使 updateDisease 在里面等待，它也不会停止调用 fetchAndUpdate。因此，在服务器上更新数据之前，会获取数据，因此不一致。

const handleRemove = (e) => {
console.log("Remove!");
updateDisease(e, 1);
fetchAndUpdate();
}

您也可以更改上述内容以使用异步等待

const handleRemove = async (e) => {
console.log("Remove!");
await updateDisease(e, 1); // wait till data is updated
fetchAndUpdate();
}

您还可以使用.then语法，例如

const updateDisease = (disease, newIsRemovedVal) => {
disease.isRemoved = newIsRemovedVal;
return axios({
method: "PUT",
url: "api/diseases/" + disease.id,
data: JSON.stringify(disease),
headers: { 'Content-Type': 'application/json; charset=utf-8' }
});
};
const handleRemove = (e) => {
console.log("Remove!");
updateDisease(e, 1).then(() => {fetchAndUpdate();});
}