useState 没有使用 axios 和 Promise 正确更新答案

【问题标题】：useState not updating properly with axios and PromiseuseState 没有使用 axios 和 Promise 正确更新
【发布时间】：2020-12-28 10:20:40
【问题描述】：

我有这个代码：

  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 const 作为useState 并且每次请求成功时，它应该使用setSuccess(true) 将success 设置为true，并使用react-router-dom 将用户重定向到/，但它不管用。状态依旧为假。我做错了什么？

我也尝试过像这样使用useEffect：

  const returnFunc = () => <Redirect to="/" />;
  useEffect(() => {
    if (success) {
      returnFunc();
    }
  }, [success, loading]);

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

我认为你应该这样做：

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

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

如果您在 UseState 中调用 returnFunc() 它将不起作用，只是在 UseEffect 中没有任何内容，但只有 [success] 会重新呈现页面，因为您将成功设置为 true，然后它应该带你到主页。

【讨论】：

由于某种原因，它工作了 2 次，然后它开始什么也不做。登录 api 的响应是 200，但没有进行重定向
它在主页上重定向了你两次？
它工作一次，然后我注销，当我再次尝试时，它不起作用。

【解决方案2】：

你可以试试这个

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

【讨论】：

【解决方案3】：

修复了将window.location.href = '/'; 添加到.then 并添加了一个if 来检查是否有localStorage。

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

【讨论】：

【解决方案4】：

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

【讨论】：

第二种方式是抛出循环错误（超出最大更新深度）
将if (success) { history.push('/'); }替换为if (success) { setSuccess(false); history.push('/'); }