Reactjs 组件将在卸载后保留状态

组件即使在卸载后仍将保持状态

我正在用Formik构建一个反馈表单，希望从类组件转移到钩子，但面临前面提到的困难

function Feedback(props) {
  const [fileInfo, setFileInfo] = useState("");
  const [feedbackStatus, setFeedbackStatus] = useState("");
  let timer = null;

  useEffect(() => {
    const status = props.feedbackResponse.status;

    if (status) {

      if (status >= 200 && status < 300) {
        setFeedbackStatus("success");
        timer = setTimeout(() => {
          props.history.goBack();
        }, 2500);
      } else if (status === "pending") {
        setFeedbackStatus("pending");
      } else {
        setFeedbackStatus("error");
      }

    }
    return () => {
      clearInterval(timer);
    }
  }, [props.feedbackResponse.status]);

  // ...code ommited for brevity
}

---

预期输出：在表单提交成功后重新打开此模式组件应呈现新表单，但它呈现以前的“提交状态”。这让我觉得我根本没有卸载我的

反馈组件，但我的错误在哪里呢？
发生上述行为是因为效果也在初始渲染时运行，在这种情况下，
道具。feedbackStatus
可能会从以前的实例中保留下来

由于您只希望在组件更新时执行效果，因此需要在初始渲染时停止执行useEffect，即使将值传递给依赖项数组，也会发生这种情况。您可以使用
useRef

function Feedback(props) {
  const [fileInfo, setFileInfo] = useState("");
  const [feedbackStatus, setFeedbackStatus] = useState("");
  const isInitialRender = useRef(true);
  let timer = null;


  useEffect(() => {
    if(isInitialRender.current === true) {
        isInitialRender.current = false;
    } else {
        const status = props.feedbackResponse.status;

        if (status) {

          if (status >= 200 && status < 300) {
            setFeedbackStatus("success");
            timer = setTimeout(() => {
              props.history.goBack();
            }, 2500);
          } else if (status === "pending") {
            setFeedbackStatus("pending");
          } else {
            setFeedbackStatus("error");
          }

        }
   }
        return () => {
          clearInterval(timer);
        }
    }, [props.feedbackResponse.status]);
}

功能反馈（道具）{
const[fileInfo，setFileInfo]=useState（“”）；
const[feedbackStatus，setFeedbackStatus]=使用状态（“”）；
const isInitialRender=useRef（true）；
设定时器为空；
useffect（（）=>{
如果（isInitialRender.current==真）{
isInitialRender.current=false；
}否则{
const status=props.feedbackResponse.status；
如果（状态）{
如果（状态>=200&&status<300）{
设置反馈状态（“成功”）；
计时器=设置超时（（）=>{
props.history.goBack（）；
}, 2500);
}else if（状态==“待定”）{
设置反馈状态（“待定”）；
}否则{
设置反馈状态（“错误”）；
}
}
}
return（）=>{
清除间隔（计时器）；
}
}，[props.feedbackResponse.status]）；
}
您可以使用

这将确保在重新打开反馈组件时创建新的反馈组件实例，从而从状态中删除旧的成功/失败消息