React Hooks - устанавливает состояние на основе нескольких асинхронных вызовов в цикле - PullRequest
0 голосов
/ 30 октября 2019

Мой эффект ниже пытается выполнить следующее:

  1. Мне нужно сделать 3 одновременных XHR-запроса на задания, публикации и продажи.
  2. Когда данные возвращаются,Мне нужно отсортировать записи в открытые, закрытые и «существующие» массивы, которые я затем добавляю в массив «running_total».
  3. Как только все запросы XHR будут выполнены и отсортированы, я хочу установить для массива running_total состояние.

К сожалению, мой приведенный ниже код не соответствует async / await, и как только эффект закончится, я получаю пустой массив. Есть идеи, что я могу делать не так?

useEffect(() => {
    const types = ["jobs", "postings", "sale_items"];

    async function getEntityReferencesAsync() {
      let running_total = [];
      types.forEach(
        function(type) {
          let open = [];
          let closed = [];
          let therest = [];

          const request = await get_data(
            `https://myapi.com.com/${type}/${props.id}`
          );

          response.then(
            function(result) {
              const result_array = result.data.records;
              result_array.forEach(
                function(item) {
                  item["type"] = type;
                  if (item.status === "open") {
                    open.push(item);
                  } else if (item.status === "closed") {
                    closed.push(item);
                  } else {
                    therest.push(item);
                  }
                }.bind(this)
              );

              running_total = [
                ...running_total,
                ...open,
                ...closed,
                ...therest
              ];
            }.bind(this)
          );
        }.bind(this)
      );
      return running_total;
    }

    async function getSortedData() {
      const sorted_array = await getEntityReferencesAsync();
      setEntityReferencesData(sorted_array);
    }

    getSortedData();
  }, [props.id]);

К вашему сведению, моя функция get_data выглядит так:

async function get_data (endpoint, params) {
    if (params === null) {
        return await axios.get(endpoint)
    } else{
        return await axios.get(endpoint, {params: params});
    }
};

1 Ответ

0 голосов
/ 31 октября 2019

Возможно, вы захотите прочитать этот блог также, используя асинхронный эффект useEffect

https://www.robinwieruch.de/react-hooks-fetch-data

Надеюсь, это поможет

...