useEffect 依赖项不重定向答案

【问题标题】：useEffect dependency not redirectinguseEffect 依赖项不重定向
【发布时间】：2020-12-08 02:04:44
【问题描述】：

我有一个使用服务器端代码进行身份验证的登录名，无论登录名是真还是假，“loginState”都将设置为此。问题是它根本没有重定向，即使 loginState 设置为 true。谁能告诉我为什么这不起作用？

const [login, setLogin] = useState(null);
  const [loginState, setLoginState] = useState(false);
  const handleOnChange = (e) => {
    setLogin({
      ...login,
      [e.target.name]: e.target.value,
    });
  };

  useEffect(() => {
    if (loginState == true) {
      return <Redirect to="/" />;
    }
  }, [loginState]);

  const handleLogin = () => {
    fetch("http://localhost:3005/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        username: login.username,
        password: login.password,
      }),
    })
      .then((res) => res.json())
      .then((result) => {
        setLoginState(result.login);
      });
  };

return (
    <>
      <h1>Login</h1>
      <input onChange={handleOnChange} type="text" name="username"></input>
      <input onChange={handleOnChange} type="password" name="password"></input>
      <button onClick={handleLogin}>Login</button>
    </>
  );

【问题讨论】：

你应该从 useEffect 返回的唯一东西是一个清理函数。见：reactjs.org/docs/hooks-effect.html#effects-with-cleanup

标签： reactjs react-hooks jsx

【解决方案1】：

要使Redirect 工作，您的组件必须返回它（换句话说，组件必须呈现它）。为什么不把这个移出useEffect：

if (loginState == true) {
      return <Redirect to="/" />;
}

把return上面的功能组件说什么？

【讨论】：