更改 React 状态需要时间，因此它在功能逻辑中采用旧状态

Question

我的子组件中有此功能，用于删除文档并使用setDocumentList 更新状态。但是当我通过快速单击删除 2-3 个文档时，它从初始状态过滤，我没有在newDocList 中获得更新状态，所以我的旧文档保持原样。并且 UI 仅针对最后一个文档进行了更新，因为更新状态需要时间。所以..如何处理这种情况请提出任何解决方案

提前致谢

    const deleteFile = (doc) => {

    Axios.delete(`url`).then((resp) => {
        let newDocList = [...documentList];
        newDocList = newDocList.filter(e => e.awsId != doc.awsId)
        setDocumentList(newDocList)
        if (props.onDocumentDeleted) props.onDocumentDeleted(newDocList)

    }).catch(error => {
        addMessageToDocUpload(doc, "Unable to delete file!", 'error')
    });

}

Answer 1

在设置依赖于先前状态的状态时尝试使用回调参数：

 const deleteFile = (doc) => {
    Axios.delete(`url`).then((resp) => {
        setDocumentList(prevDocList => prevDocList.filter(e => e.awsId != doc.awsId));

    }).catch(error => {
        addMessageToDocUpload(doc, "Unable to delete file!", 'error')
    });

然后在新文档更新后将 useEffect 添加到派生计算：

useEffect(
    () => {
        if (props.onDocumentDeleted) { props.onDocumentDeleted(newDocList) }
    },
    [documentList]
);