Изменение состояния реактивного компонента с помощью хуков и с помощью Fetch - PullRequest
Новая
       24

Изменение состояния реактивного компонента с помощью хуков и с помощью Fetch

1 голос
/ 01 апреля 2020

У меня быстрый вопрос о том, как React изменяет состояние компонента функции с помощью хуков Я получаю некоторые данные из базы данных ASW RDS MySQL. Соответствующий фрагмент кода выглядит следующим образом: 

const [data, upDateData] = React.useState([]);

.....

async function load() {
    let response = await fetch("/api/employee");
    let body = await response.json();
    upDateData(body);
    console.log(body);
    console.log(data)
}

Мой вопрос заключается в следующем. Когда я консоль регистрирую переменную «body», которая является фактическим ответом, я получаю массив Json объектов, именно то, что я ожидаю. Тем не менее, когда я делаю то же самое с моей переменной «data», определенной в ловушке, я получаю пустой массив, даже если я сохраняю журнал после вызова функции updateData и изменения (предположительно) значения «data». Может ли кто-нибудь объяснить, почему это так? Я подозреваю, что это может быть связано с асин c характером функции, но я не уверен. Заранее спасибо!

1 Ответ

1 голос
/ 01 апреля 2020

Да, вы правы, состояние обновления asyn c, и вы не можете получить данные сразу после обновления.

setState действия являются асинхронными и пакетируются для повышения производительности. setState () не изменяет это немедленно. Таким образом, вызовы setState являются асинхронными, а также пакетными для улучшения пользовательского интерфейса и производительности. Это относится к обоим functional/Class компонентам.

Из документации React

React может объединять несколько вызовов setState () в одно обновление для повышения производительности. Поскольку this.props и this.state могут обновляться асинхронно, вы не должны полагаться на их значения для вычисления следующего состояния.

Подробнее об этом можно прочитать здесь

...