Axios 内部状态未针对 React Hooks 进行更新答案

【问题标题】：Inside Axios State Is Not Updating for React HooksAxios 内部状态未针对 React Hooks 进行更新
【发布时间】：2020-01-25 14:55:24
【问题描述】：

在此示例中，setAuth 状态未在 axios 调用中更新。如果 HTTP 状态代码为 200，我尝试在 API 调用后更新状态。但状态没有更新。

export default function SignIn() {
    const classes = useStyles();

    //var apiBaseUrl = "https://reqres.in/api/login";
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [auth, setAuth] = useState(false);

    var payload = {
        "email": email,
        "password": password
    }
}
    const handleClick = (event) => {

        event.preventDefault();

        console.log(payload);
        // console.log(event);

        axios.post('https://reqres.in/api/login', payload)
            .then(function (response) {
                console.log(response.status);

                if (response.status === 200)
                    setAuth(true);
                    console.log(auth);

            })
            .catch(function (error) {
                console.log(error);
            });
    }

【问题讨论】：

QQ - 你会尝试将console.log(auth) 放在函数体的顶部吗？另外 - 避免单行条件并使用完整的if(){...}
另外 - 欢迎来到 SO，享受你的第一个 updoot！

标签： reactjs axios react-hooks

【解决方案1】：

我认为这更像是您想要实现的目标

export default function SignIn() {
  const classes = useStyles();

  //var apiBaseUrl = "https://reqres.in/api/login";
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [auth, setAuth] = useState(false);

  var payload = {
      "email": email,
      "password": password
  }

  console.log(auth);

  const handleClick = (event) => { // IN THE CLOSURE! :)

    event.preventDefault();

    console.log(payload);

    axios.post('https://reqres.in/api/login', payload)
        .then(function (response) {
            console.log(response.status);

            if (response.status === 200)
                setAuth(true);

        })
        .catch(function (error) {
            console.log(error);
        });
  }

  return <div>{auth}</div> // Just returning JSX to get the point across.
}

这些钩子很棘手，所有“他们的关注点”都需要在函数体中
您设置的条件存在语法问题
console.log(auth) 的位置不应在回调中以反映您正在寻找的状态。

【讨论】：