Reactjs 删除react应用程序中的按钮缺少首次单击页面加载

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

我有一个神秘的问题，我一直试图解决，但迄今为止都没有成功

我有一组表列，您可以在下面看到

这是一个小表，只包含一列ID和一列，其中有两个按钮：Remove | Keep

按钮的作用是：

当你点击Keep时，什么都没有发生，疾病就留在表中

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

单击remove将启动一个名为HandlerRemove的函数。此函数首先调用updateDisease，它设置disease对象的“isRemoved”值。 然后它调用fetchAndUpdate以获取移除该疾病的新列表

我遇到的问题是这个

当我第一次加载页面时，当我第一次单击“删除”时，页面上什么也没有发生

但是，我确实看到“handleRemove”函数中的console.log消息带有正确的disease对象

但是，第二次单击“删除”时，在会话的剩余时间内，一切正常

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

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

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]);

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

---

谢谢

因为您正在UpdateDisease中执行异步请求，请参见1；在再次从服务器获取数据之前，需要等待请求完成

当您像下面这样调用updateDisease和fetchAndUpdate时，即使updateDisease中有wait，它也不会停止调用fetchAndUpdate。所以，您需要在服务器上更新数据之前获取数据，因此存在不一致性

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

您可以将上述内容更改为使用async Wait，就像

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();});

}

---

您可以在updateDisease中返回一个承诺，然后执行updateDisease，1。然后=>fetchAndUpdate@HMR谢谢，但那个承诺能做什么呢？我很抱歉。我不知道这个承诺会起什么作用，也不知道它会有什么帮助。您的意思是在UpdateDisase中调用fetchAndUpdate吗？谢谢fetchAndUpdate是否调用从服务器获取数据的API？Hi@ShubhamKhatri是的，fetchAndUpdate是一个通过API从服务器获取数据的外部组件。这只是一个简单的const result=await-axiosapi/diseases/@HMR是一个承诺，只是与await的异步吗？谢谢当我这么做的时候，我注意到如果我点击删除太快，页面就会停止反应…有趣的是，你可以使用。然后语法从updateDisease返回承诺，看看这有什么不同。谢谢你的意思是像“等待updateDisease，1然后fetchAndUpdate；”？Thnks！使用.then语法时，是否需要删除异步并等待？