當子功能組件重定向時，無法對父功能組件中的未安裝組件警告執行 React 狀態更新

Question

我有一個父組件 UserLogInPage 和一個子組件 SignIn（都是功能組件）。

在 SignIn 子組件中，如果 authResult 為真，我會重定向

{authResult ? <Redirect to="/"></Redirect> : null}

我像這樣觸發 loginUser 操作以檢查用戶輸入的憑據是否正確（此調度位於 SignIn 子組件內的 handleSubmitSignInValues 處理程序中）：

dispatch(loginUser(signInValues)).then((response) => {
      console.log(response);
      setAuthResult(response.payload.auth);
      setMessage(response.payload.message);
      setUserData(response.payload.userData);
    });

我的問題是我不斷收到警告

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in SignIn (at UserLogInPage.component.jsx:59)
    ...

請問為什么會這樣，我該如何解決？ 此警告僅在我嘗試重定向后才開始出現。 我嘗試在 useEffect 中進行重定向，但這也無濟於事。

登錄組件

const SignIn = () => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const [signInValues, setSignInValues] = useState({
    email: "",
    password: "",
    showPassword: false,
  });
 
  const [authResult, setAuthResult] = useState("");
  const [message, setMessage] = useState("");
  const [userData, setUserData] = useState({});
 
  const handleChange = (prop) => (event) => {
    setSignInValues({ ...signInValues, [prop]: event.target.value });
  };
 
  const handleClickShowPassword = () => {
    setSignInValues({
      ...signInValues,
      showPassword: !signInValues.showPassword,
    });
  };
 
  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };
 
  const handleSubmitSignInValues = (event) => {
    if (signInValues.email === "" || signInValues.password === "") {
      alert("Please enter all required fields");
      return event.preventDefault();
    } else if (signInValues.password.length < 8) {
      alert("Your password is too short :( Make it longer than 8 maybe?");
      return event.preventDefault();
    }
    console.log(signInValues);
 
    dispatch(loginUser(signInValues)).then((response) => {
      console.log(response);
      setAuthResult(response.payload.auth);
      setMessage(response.payload.message);
      setUserData(response.payload.userData);
    });
  };
 
  return (
    <Container maxWidth={"sm"}>
      <Typography component={"span"} className={classes.insideContainerStyle}>
        <TextField
          className={classes.textfieldStyle}
          required
          id="email"
          label="Email"
          onChange={handleChange("email")}
          fullWidth
          helperText="Enter your email here"
        />
        <FormControl className={classes.textfieldStyle}>
          <InputLabel htmlFor="standard-adornment-password">
            Password * (min 8 characters)
          </InputLabel>
          <Input
            required
            id="standard-adornment-password"
            type={signInValues.showPassword ? "text" : "password"}
            value={signInValues.password}
            onChange={handleChange("password")}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                >
                  {signInValues.showPassword ? (
                    <Visibility />
                  ) : (
                    <VisibilityOff />
                  )}
                </IconButton>
              </InputAdornment>
            }
          />
        </FormControl>
        <div></div>
        <br></br>
        <br></br>
        <br></br>
        <br></br>
 
        <Button
          onClick={(e) => handleSubmitSignInValues(e)}
          variant="contained"
          color="secondary"
        >
          Log Me In!
        </Button>
        <div></div>
        ...
        {authResult ? <Redirect to="/"></Redirect> : null}
      </Typography>
    </Container>
  );
};
 
export default SignIn;

編輯：我可以忽略這個嗎？

Answer 1

dispatch 的 then 塊中的響應處理程序被異步調用，當它執行時，組件不再在 DOM 中（發生了重定向）。 您正在嘗試更新狀態（ setAuthResult 、 setMessage等）並且 React 警告您它無法對未安裝的組件執行狀態更新。