Inside Ax ios Состояние не обновляется для React Hooks - PullRequest
Новая
       12

Inside Ax ios Состояние не обновляется для React Hooks

1 голос
/ 25 января 2020

В этом примере состояние setAuth не обновляется внутри вызова ax ios. Я пытался обновить состояние после вызова API, если код состояния HTTP равен 200. Но состояние не обновляется. 

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);
            });
    }

1 Ответ

0 голосов
/ 25 января 2020

Я думаю, это больше того, чего вы пытаетесь достичь 

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.
}
  1. Эти хитрости хитры, и все «их проблемы» должны быть в теле функции
  2. У настроенного вами условия есть синтаксическая проблема
  3. Позиция console.log(auth) не должна быть в обратном вызове, чтобы отражать состояние, которое вы ищете.
...