如何在使用历史Api时执行React状态更新

Question

为了简单起见，我只写了一小段代码，并专注于问题。我有一个组件，它有一个对话框，这是一个商业流程的一部分，你可以在其中填写一些信息，比如注释，你可以批准销售或不批准。

import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
const Modal = ({
closeModal,
open
}) => {
const [note, setNote] = useState('')
const [approved, setApproved] = ('')

const history = useHistory();
useEffect(() => {
setNote('')
setApproved('')

},[open]) 

这个功能使异步作业，一旦你填写了信息，你点击保存按钮，它会关闭模式，然后将你转移到商业流程的另一个阶段，这是由历史完成的。push

const update = () => {
return updatePromise({ notes, approved }).then(() => {
closeModal();
if (approved === 'yes') {
history.push('/route');
}
});
};
return (
<Dialog open={open} onClose={closeModal}>
<Notes value={note} />
<ActionsButton
closeModal={closeModal}
disabled={!approved.length > 0}
save={update}
buttonName={'save'}
/>
</Dialog>
);
};

一切都很好，但当你点击保存按钮时，控制台上会出现一条警告，说"；警告：无法对未安装的组件执行React状态更新。这是一个非操作，但它表明应用程序中存在内存泄漏。若要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务">

经过一段时间的调试，我发现问题出在promise上，当我在有条件的情况下将新的url推到历史记录中时，我不知道还能做什么。

如何正确使用history.push来清除状态更新的副作用？

Answer 1

我认为问题出在useEffect级别，如您收到的警告消息中所述。

我相信你使用useEffect钩子来清除模态形式。如果这是真的，那么当它是假的时候，你真的不需要清除它。因此，如果在useEffect钩子中添加if语句，请检查open是否为true。它至少可以解决您的警告信息。

useEffect(() => {
//when modal is closed(open === false)
if(open) { //this will check for truthy values. and the state will not update when open is false
setNote('')
setApproved(false)
}
},[open])