Question

关于此警告的问题已经在互联网上被询问并回答了无数次，但是-也许正是由于这个原因-我很难找到符合我自己情况的评论。

我正在使用自动保存功能，当您开始在组件的表格中键入内容时，它将启动一个计时器。完成后，a）分派一个动作（工作正常），b）清除计时器状态，以便下次用户键入它知道可以开始一个新的动作。

问题是在计时器完成之前卸载组件时出现的：当计时器到期时，我会在尝试清除计时器状态时收到Can't perform a React state update on an unmounted component警告。

现在，我在网上找到的几乎所有解决方案都建议我在运行相关的isMounted状态调用之前创建一个setAutosave(null)状态变量并检查它。除了-据我所知-Javascript计时器的性质意味着，setTimeout回调（或Promise回调）可用的值是计时器时的那些已启动-当然，已经安装了组件。

有效地，我陷入了以下困境：a）如果安装了组件，则需要状态重置的自动保存功能； b）反应是，如果组件为n，则要求状态重置不会发生。 t 已安装，并且c）计时器阻止检查（我能想到的）是否已安装组件。有什么想法吗？

const { dispatch } = useContext(MyContext)
const [autosave, setAutosave] = useState(null)

const save = () => {
  clearTimeout(autosave) // in case you manually submit the form
  setAutosave(null)
  dispatch({ type: "SAVE" }) // this line works fine
}

const onChange = () => {
  if (!autosave) {
    const timeoutId = setTimeout(save, 30000)
    setAutosave(timeoutId)
  }
}

<form onChange={onChange} onSubmit={save}>
...

Answer 1

但是我不确定，如果您的组件是基于类的组件和componentWillUnmount功能组件，请尝试使用useEffect更改状态

反应超时“无法在已卸载的组件上执行状态更新”

1 个答案: