Почему React Hooks не обновляет данные - PullRequest
Новая
       31

Почему React Hooks не обновляет данные

0 голосов
/ 14 марта 2020

Я пытаюсь обновить значения в useState с выбранными данными. когда я консоль .log data.success , возвращается true . Затем я присваиваю значение success . но он возвращает false ! Почему? почему ценность успеха не обновляется сразу. В конце я получаю сообщение от сервера, что вход был успешным. Успешный вход в систему: false пользователь admin вошел в систему 

const Signin = () => {
  const [values, setValues] = useState({
    success: false
  });

  const { success } = values;

  const clickSubmit = async event => {
    event.preventDefault();

    const signReact = catchAsync(async (email, password) => {
      const data = await signin(email, password) // fetch data from the server
      console.log(data.success); // -> true
      if (data) {
        setValues({
          ...values, success: data.success // -> assign to success
        });
        console.log("SIGN IN success: " + success); // -> false! why?!
      }
      return data;
    });

    signReact(email, password);
  };

Ответы [ 3 ]

1 голос
/ 14 марта 2020

использование использованиеЭффект . Попробуйте что-то вроде этого: 

useEffect(() => {
    console.log("SIGN IN success: " + values.success);
  }, [values]);

...
...
 const data = await signin(email, password);
 setValues(prevState =>{...prevState, success: data.success});
0 голосов
/ 14 марта 2020

В соответствии с документацией:

Вызовы setState являются асинхронными - не полагайтесь на this.state, чтобы отобразить новое значение сразу после вызова setState. Передайте функцию обновления вместо объекта, если вам нужно вычислить значения на основе текущего состояния:

Пример: 

const Signin = () => {
  const [values, setValues] = useState({
    success: false
  });

  const { success } = values;

  React.useEffect(()=> {
    console.log("SIGN IN success: " + success);
  }, [values]);

  const clickSubmit = async event => {
    event.preventDefault();

    const signReact = catchAsync(async (email, password) => {
      const data = await signin(email, password) // fetch data from the server
      console.log(data.success); // -> true
      if (data) {
        setValues({
          ...values, success: data.success // -> assign to success
        });
      }
      return data;
    });

    signReact(email, password);
  };
0 голосов
/ 14 марта 2020

setState() - асинхронная функция. Таким образом, вы не можете напечатать его в следующем выражении. Это займет некоторое время. Чтобы увидеть обновленные значения состояния, вы можете зарегистрировать его в useEffect(), например, 

useEffect(()=>{

console.log(values);
},[values])
...