Javascript Can'；t当子功能组件重定向时，对父功能组件中的未安装组件警告执行反应状态更新

我有一个父组件UserLogInPage和一个子组件SignIn（两者都是功能组件）

在SignIn子组件中，如果authResult为true，则重定向

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

我的问题是我一直收到警告

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)
    ...

我可以问一下为什么会发生这种情况，以及我如何解决这个问题吗？此警告仅在我尝试重定向后才开始出现。我试着用useffect来做重定向，但也没用

符号成分

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;

const SignIn=（）=>{
const classes=useStyles（）；
const dispatch=usedpatch（）；
常量[信号值，设置信号值]=使用状态({
电邮：“，
密码：“”，
showPassword:false，
});
const[authResult，setAuthResult]=useState（“”）；
const[message，setMessage]=useState（“”）；
const[userData，setUserData]=useState（{}）；
常量handleChange=（道具）=>（事件）=>{
SetSignInValue（{…SignInValue，[prop]：event.target.value}）；
};
const handleClickShowPassword=（）=>{
设置信号值({
…重要的价值，
showPassword:！signInValues.showPassword，
});
};
const handleMouseDownPassword=（事件）=>{
event.preventDefault（）；
};
常量handleSubmitSignInValues=（事件）=>{
if（signInValues.email==“”| | signInValues.password==“”）{
警报（“请输入所有必填字段”）；
return event.preventDefault（）；
}else if（signInValues.password.length<8）{
警告（“您的密码太短：（可能要超过8？”）；
return event.preventDefault（）；
}
控制台日志（符号值）；
分派（登录用户（签名值））。然后（（响应）=>{
控制台日志（响应）；
setAuthResult（response.payload.auth）；
setMessage（response.payload.message）；
setUserData（response.payload.userData）；
});
};
返回(
密码*（最少8个字符）












HandleSubmitSignInValue（e）}
variant=“包含”
color=“次要”
>
让我登录！
...
{authResult？：null}
);
};
导出默认签名；

---

编辑：我可以忽略这个吗？

调度的then块中的响应处理程序被异步调用，当它执行时，组件不再在DOM中（发生重定向）。您正在尝试更新状态（

setAuthResult

，

setMessage

等）React警告您无法对未安装的组件执行状态更新。

我应该如何更改代码以避免此警告？请尝试在

setUserData

之后移动

setAuthResult

。

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;