Блог

У меня есть родительский компонент UserLogInPage и дочерний компонент SignIn (оба являются функциональными компонентами).

При входе в дочерний компонент я перенаправляю, если значение authResult равно true

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

и я запускаю действие LoginUser, подобное so, чтобы проверить правильность введенных пользователем учетных данных (эта отправка находится в моем обработчике 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;
  

Редактировать: Могу ли я просто игнорировать это?

Обработчик ответа в блоке отправки then вызывается асинхронно, и когда он выполняется, компонент больше не находится в DOM (произошло перенаправление). Вы пытаетесь обновить состояние ( setAuthResult , setMessage и т.д.), А React предупреждает вас, что не может выполнить обновление состояния для размонтированного компонента.