Извлечение массива данных с помощью функции .map

Question

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

useEffect(() => {
    (async () => {
      const result = await newArray.map((item, index) =>
        axios.get(`http://pokeapi.co/api/v2/pokemon/${index + 1}`)
      );
      setDataNew(result);
      console.log(dataNew);
    })();
  }, []);

newArray - это просто созданный массив для отображения всех 151 покемонов. Заранее спасибо.

Answer 1

Ну, я пытался что-то сделать, чтобы сделать эту работу, но не повезло В настоящее время мой код выглядит так:

  const [dataNew, setDataNew] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const result = await Promise.all(
        newArray.map((item, index) =>
          axios.get(`http://pokeapi.co/api/v2/pokemon/${index + 1}`)
        )
      );
      setDataNew(result);
      console.log(result);
    }
    fetchData();
  }, []);

И результат console.logging дает мне массив из 151 неопределенного. Как я могу заставить это работать? @ Junvar

Answer 2

Во-первых, нет необходимости во вложенной сразу вызываемой функции, все, что нужно сделать, это проглотить возвращаемое значение.

Во-вторых, вы ожидаете массив обещаний, но этот массив не является обещанием. Вы должны заключить массив обещаний в вызов Promise.all, чтобы ожидать каждого отдельного обещания в массиве.

useEffect(async () => {
      const result = await Promise.all(newArray.map((item, index) =>
        axios.get(`http://pokeapi.co/api/v2/pokemon/${index + 1}`)
      )); // result will be an array of values (not promises)
      setDataNew(result);
      console.log(dataNew);
  }, []);