reactstrap modal 中的 Graphql 突变 - 无法对未安装的组件执行 React 状态更新答案

【问题标题】：Graphql mutation in reactstrap modal - Can't perform a React state update on an unmounted componentreactstrap modal 中的 Graphql 突变 - 无法对未安装的组件执行 React 状态更新
【发布时间】：2019-12-29 01:31:04
【问题描述】：

注意：我已经看到很多关于此警告消息的问题，但大多数问题似乎都是关于在安装组件后立即异步获取数据，而我正在尝试执行一个 graphql 突变发送单击即可触发表单提交，因此我认为我不能采取类似的方法。

另外，我正在使用钩子，因此与/使用它相关的解决方案会很好。

我在 reactstrap 模式中有一个表单，并在提交时进行 graphql 突变。如何确保组件在卸载后没有尝试更新状态以免出现此错误？

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

仅当用户在提交后立即离开页面时才会出现警告。大多数时候用户永远不会这样做，而是会提交然后在页面上停留至少几秒钟，在这种情况下，警告永远不会出现并且没有问题，但我不想采取任何机会。

这是在表单标签的 onSubmit 内的 handleSubmit 代码：

const handleSubmit = async e => {
  e.preventDefault();
  const contactToUpdate = {
    id,
    name: e.target.name.value,
    email: e.target.email.value,
  };
  const addressToUpdate = {
    city: e.target.city.value,
    state: e.target.state.value,
    street1: e.target.street1.value,
    street2: e.target.street2.value,
    zip: e.target.zip.value
  };
  const updateContact = updateCoordinators(
    contactToUpdate,
    addressToUpdate
  );
  try {
    const apiData = await API.graphql(graphqlOperation(updateContact));
    if (apiData) {
      const newContactInfo = apiData.data.updatePerson;
      setContactInfo(newContactInfo);
    }
    setToastType("success");
    setShowSnackbar(true);
    closeModal();
  } catch (err) {
    console.error(err);
    setToastType("error");
    setShowSnackbar(true);
  }
};

【问题讨论】：

标签： reactjs graphql reactstrap

【解决方案1】：

问题不在于突变，而在于小吃店！它被设置为在 setTimeout 中停留 3 秒，这是我没有意识到的，因为我没有编写该代码。如果用户在这 3 秒结束之前点击离开，它会尝试将其状态设置为是否显示为 false，即使它现在已被卸载，从而导致警告。在snackbar 组件中，我将setTimeout 放入useEffect 并在返回时在回调中清除它，这样如果snackbar 组件被卸载，它会清除超时，因此在卸载后永远不会尝试设置状态，如下所示：

  useEffect(() => {
    const timeout = setTimeout(() => {
      setShowSnackbar(false);
    }, 3000);
    return () => clearTimeout(timeout);
  });

【讨论】：