Question

我有此代码：

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  const onSubmitHandler = (event) => {
    event.preventDefault();
    setLoading(true);
    axios({
      method: 'post',
      url: `${process.env.REACT_APP_API_URL}users/auth/sign_in`,
      data: { email, password },
      headers: { 'content-type': 'application/json' },
    })
      .then(function (response) {
        setSuccess(true);
        console.log(response, ' sucesso');
        const authData = {
          accessToken: response.headers['access-token'],
          client: response.headers.client,
          uid: response.headers.uid,
        };
        localStorage.setItem('authData', JSON.stringify(authData));
      })
      .catch(function (error) {
        setLoading(false);
        setError(true);
        console.log(error, 'error');
      });
  };

if(success) return <Redirect to="/" />

这是一个登录页面，当用户按下“登录”按钮时，将执行此功能。效果很好，但是我在使其重定向到主页时遇到了一些麻烦。

我将success常量添加为useState，每次请求成功时，都应该使用success将setSuccess(true)设置为true并将用户重定向到{ {1}}使用/，但无法正常工作。该状态仍为假。我在做什么错了？

我也尝试过像这样使用react-router-dom：

useEffect

Answer 1

我认为您应该这样做：

useEffect(() => {}, [success, loading]);

if(success) return <Redirect to="/" />

如果要在UseState中调用returnFunc（），它将无法正常工作，而UseEffect里面什么也没有，而只有[success]会重新呈现页面，因为您将成功设置为true，那么它应该带您进入主页。

Answer 2

你能试试吗

return success ? <Redirect to="/" /> : "Render somthing for none login state";

Answer 3

...
import { BrowserRouter as Router } from "react-router-dom";

...
return (
  ...
  <Router>
   {success && <Redirect to="/" />}
  </Router>
)



// or you can try this way
import { useHistory } from "react-router-dom";

let history = useHistory();
...

useEffect(() => {
    if (success) {
      setSuccess(false)
      history.push('/');
    }
  }, [success]);

Answer 4

修复了将window.location.href = '/';添加到.then并添加是否检查本地存储的问题。

  if (localStorage.getItem('authData')) {
    return <Redirect to="/" />;
  }

useState无法通过axios和Promise正确更新

4 个答案: