Question

注意：我已经看到了很多有关此警告消息的问题，但大多数问题似乎都与在安装组件后立即异步获取数据有关，而我正在尝试对在计算机上发送的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);
  }
};

Answer 1

问题不是突变，而是小吃吧！它被设置为在setTimeout中停留3秒钟，但我没有意识到，因为我没有编写该代码。如果用户在这3秒钟之前单击离开，它将尝试将其状态设置为是否显示为false（即使现在已卸载），从而引起警告。在快餐栏组件中，我将setTimeout放入useEffect中，并在返回时在回调中将其清除，这样，如果卸载了快餐栏组件，它将清除超时，因此从不尝试在卸载后设置状态，如下所示：

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

reactstrap模态中的Graphql突变-无法在未安装的组件上执行React状态更新

1 个答案: