Question

我有一个使用服务器端代码进行身份验证的登录名，并且无论登录名是true还是false，“ 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>
    </>
  );

Answer 1

要使Redirect正常工作，您的组件必须返回它（该组件必须呈现它）。为什么不将其移出useEffect：

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

并放在功能组件的return上方？

useEffect依赖关系不会重定向

1 个答案: