修復“無法對卸載的組件執行 React 狀態更新”錯誤

Question

當我嘗試推送到我的 Web 應用程序中的新頁面時，下面的代碼給出了一個控制台錯誤：

警告：無法對卸載的組件執行 React 狀態更新。 這是一個空操作，但它表明您的應用程序中存在內存泄漏。 要修復，請取消 useEffect 清理函數中的所有訂閱和異步任務。 在 PasswordResetPage（由 Context.Consumer 創建）

您會注意到，在注釋掉的代碼中，我嘗試使用useEffect因為這是大多數 stackoverflow 答案所指向的內容。 但是，錯誤仍然存​​在。 如何在這種情況下使用history.push並擺脫錯誤？

import React, { useState /* , useEffect */ } from 'react'
import useForm from 'react-hook-form'
import Logo from '../assets/images/logo-icon-orange.png'
import TextInput from '../components/TextInput'
import Footer from '../components/Footer'
import AnimatedButton from '../components/AnimatedButton'
import logger from '../logger'
import { sleep } from '../utils/promise'
import PasswordResetSchema from './validation/PasswordResetSchema'

const PasswordResetPage = ({ history }) => {
  const [isSubmitting, setSubmitting] = useState(false)
  // const [isDone, setDone] = useState(false)
  const { register, handleSubmit, errors } = useForm({
    validationSchema: PasswordResetSchema,
  })

  const onSubmit = async data => {
    setSubmitting(true)
    await sleep(2000)
    logger.info('form data', data)
    // setDone(true)
    history.push('/confirmation')
  }

  // useEffect(() => {
  //   if (isDone) {
  //     history.push('/confirmation')
  //   }
  // })


  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <div className="text-center mb-4">
        <img className="mb-4" src={Logo} alt="Striver" width={72} />
        <h1 className="h3 mb-3 font-weight-normal">Password reset</h1>
        <p>Enter your email address below and we will send you instructions on how you can reset your password.</p>
      </div>

      <div className="form-label-group">
        <TextInput type="email" id="email" register={register} label="Email address" errors={errors} />
      </div>

      <AnimatedButton actionTitle="Next" isSubmitting={isSubmitting} />
      <Footer />
    </form>
  )
}

export default PasswordResetPage

Answer 1

看看這是否適合你：

代碼沙盒與工作示例：

https://codesandbox.io/s/reactrouteranswerso-817bp

const onSubmit = async data => {
    setSubmitting(true)
    await sleep(2000)
    logger.info('form data', data)
    setDone(true)
  }

  useEffect(() => {
    if (isDone) {
      history.push('/confirmation')
    }
  },[isDone]);

CodeSandbox 上的工作代碼：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import "./styles.css";

function App() {
  const [user, setUser] = useState(null);

  function doLogin() {
    console.log("Inside do login...");
    setUser("someUserID");
  }

  function doLogout() {
    console.log("Inside do logout...");
    setUser(null);
  }

  return (
    <Router>
      <AllRoutes user={user} doLogin={doLogin} doLogout={doLogout} />
    </Router>
  );
}

function AllRoutes(props) {
  console.log("Rendergin AllRoutes...");
  // console.log(props);
  return (
    <Switch>
      <Route exact path="/" component={Component1} />
      <Route exact path="/comp2" component={Component2} />
    </Switch>
  );
}

function Component1(props) {
  const [isDone, setIsDone] = useState(false);

  useEffect(() => {
    if (isDone) {
      props.history.push("/comp2");
    }
  }, [isDone, props.history]);

  return (
    <React.Fragment>
      <div>Component1</div>
      <button onClick={() => setIsDone(true)}>Submit</button>
    </React.Fragment>
  );
}

function Component2(props) {
  const [goBack, setGoBack] = useState(false);

  useEffect(() => {
    if (goBack) {
      props.history.push("/");
    }
  }, [goBack, props.history]);

  return (
    <React.Fragment>
      <div>Component2</div>
      <button onClick={() => setGoBack(true)}>Go Back</button>
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

我相信await sleep(2000)是實際 API 調用的替代品。
API 調用以及history.push是副作用，因此應該放在useEffect 。
嘗試這個：

const PasswordResetPage = ({ history }) => {
  const [formData, setFormData] = useState(null);

  // ...

  const onSubmit = async data => {
    setFormData(data);
  }

  useEffect(() => {
    logger.info('form data', formData);
    sleep(2000).then(() => history.push('/confirmation'););
  }, [formData]);

  // ...
}