Question

在此示例中，axios调用内的setAuth状态未更新。如果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);
            });
    }

Answer 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)的位置不应位于回调中以反映您正在寻找的状态。

内部Axios状态未更新React挂钩

1 个答案: