React-Bootstrap Modal子组件调用关闭函数时触发未挂载组件状态更新警告问题排查

这个警告出现的核心原因是：当你调用handleClose()关闭Modal时，子组件AddNewNoteForm会立即被React卸载，但此时组件中还有未完成的异步操作（比如你设置的setTimeout，或者useForm内部的状态更新），这些操作在组件卸载后仍然尝试更新组件状态，就会触发React的这个警告。

我们可以通过跟踪组件的挂载状态来避免这个问题，确保只有在组件仍然挂载时才执行状态更新或相关操作。

步骤1：在子组件中添加挂载状态跟踪 #

首先在AddNewNoteForm里添加一个状态来记录组件是否挂载，并在组件卸载时更新这个状态：

const AddNewNoteForm = (props) => {
  const { data, handleClose } = props
  const [isSubmitted, setIsSubmitted] = useState(false)
  // 新增：跟踪组件是否挂载
  const [isMounted, setIsMounted] = useState(true);

  useEffect(()=>{
    setIsMounted(true); // 组件挂载时设为true
    return () => {
      setIsMounted(false); // 组件卸载时设为false
      console.log('unmounted')
    }
  },[])

  // ... 其他代码保持不变
}

步骤2：在所有异步操作和状态更新前检查挂载状态 #

现在，所有可能在组件卸载后执行的操作（比如setTimeout里的handleClose、setError等）都需要先检查isMounted的值：

const onSubmit = async (e) => {
  const params = { object: 'prodOrder', note: e.note, id: data.prodOrderId }
  try {
    const response = await postNotes(params)
    setTimeout(() => {
      // 只有组件还挂载时才执行关闭操作
      if (isMounted) {
        handleClose();
      }
    }, 1500)
  } catch (error) {
    // 只有组件还挂载时才设置错误状态
    if (isMounted) {
      console.log(error)
      setError('service', { type: 'serversideerror', message: 'Notlar kaydedilirken bir hata oluştu.' })
      console.log(errors)
    }
  }
}

优化建议：替换setTimeout为更可控的方式 #

如果你用setTimeout是为了让用户看到提交成功的反馈（比如表单上的成功提示），可以改成通过状态控制，同时清理定时器避免内存泄漏：

const AddNewNoteForm = (props) => {
  // ... 之前的代码
  const [submitSuccess, setSubmitSuccess] = useState(false);

  // 当提交成功后，延迟关闭Modal
  useEffect(() => {
    let timer;
    if (submitSuccess && isMounted) {
      timer = setTimeout(() => {
        if (isMounted) {
          handleClose();
        }
      }, 1500);
    }
    // 清理定时器
    return () => clearTimeout(timer);
  }, [submitSuccess, isMounted, handleClose]);

  const onSubmit = async (e) => {
    const params = { object: 'prodOrder', note: e.note, id: data.prodOrderId }
    try {
      const response = await postNotes(params)
      if (isMounted) {
        setSubmitSuccess(true); // 设置成功状态，触发延迟关闭
      }
    } catch (error) {
      if (isMounted) {
        console.log(error)
        setError('service', { type: 'serversideerror', message: 'Notlar kaydedilirken bir hata oluştu.' })
        console.log(errors)
      }
    }
  }

  // 在表单中可以根据submitSuccess显示成功提示
  return (
    <Form>
      {/* ... 表单内容 */}
      {submitSuccess && <div className="text-success">提交成功！</div>}
    </Form>
  )
}

这样不仅能避免警告，还能让代码逻辑更清晰，同时避免不必要的内存泄漏。

内容的提问来源于stack exchange，提问作者Ergun