Проблемы с асинхронной природой приведения в React?

Question

Я загружаю данные в один из моих родительских компонентов, а затем использую различные операторы фильтра, основанные на выборе пользователя из полей выбора.Затем я вызываю действие, которое просто сохраняет отфильтрованные данные на основе поиска пользователей в глобальном состоянии, чтобы мои дочерние компоненты могли получить к ним доступ.

Один из моих дочерних компонентов должен отображать результаты, но чтопроисходит то, что результаты оказываются отстают от одного действия.Я сталкивался с подобными проблемами при использовании set state, и тогда я решил использовать обратный вызов, но я не совсем уверен, как поступить с этой проблемой в этой ситуации с приставкой.

Wordpress.getпросто называется import of axios config.

componentDidMount = async () => {
    const response = await wordpress.get(
      "*********************/api/wp/v2/variants?per_page=100"
    );
    this.props.fetchData(response);
    const data = []
    response.data.forEach(ele => {
        data.push(ele)
    })
    this.props.sendFilteredView(data);
};
handleChange = () => {
    this.preBuiltFiltering();
};

Я исключил встроенную фильтрацию, потому что она длинная и чрезмерная, все, что она делает, - запускает фильтр на основе выбора пользователя и затем отправляет this.Действие props.sendFilteredView с отфильтрованными данными, установленными в качестве аргумента.Действие просто возвращает полезную нагрузку.

Затем я отображаю результаты фильтра в дочернем компоненте, обращаясь к глобальному состоянию (я также пытался просто передать его напрямую через props, та же проблема).

Answer 1

Это асинхронная функция, вы используете обратный вызов после forEach с данными.

Поэтому вам нужно дождаться завершения каждого.

Попробуйте использовать await перед forEach.

componentDidMount = async () => {
    const response = await wordpress.get(
      "*********************/api/wp/v2/variants?per_page=100"
);
    this.props.fetchData(response);
    const data = []
    await response.data.forEach(ele => {
        data.push(ele)
    })
    this.props.sendFilteredView(data);
};
handleChange = () => {
    this.preBuiltFiltering();
  };