Как получить вспомогательную функцию, возвращающую обещание для функции перехвата React

Question

У меня есть следующий функциональный компонент React с хуками useState и useEffect:

import React, { useState, useEffect } from 'react';
import { requestInfo } from './helpers/helpers';

const App = () => {
  const [people, setPeople] = useState([]);

  useEffect(() => {
    requestInfo('people', '82')
      .then(results => setPeople(results))
  }, []);

  return (
    <p>We have {people.length} people in this game.</p>
  );
}

export default App;

In helpers.js У меня есть эта функция:

export const requestInfo = (resource, quantity) => {
  fetch(`https://swapi.dev/api/${resource}/?results=${quantity}`)
    .then(response => response.json)
    .then(data => data.results)
}

Я не У меня большой опыт написания асинхронных функций, вызывающих API, но я просмотрел другие вопросы и ответы на этом веб-сайте, в которых говорилось, что в подобных ситуациях мне нужно, чтобы вспомогательная функция возвращала обещание, а затем код, вызывающий вспомогательную функцию, выполнял что-то с результатом обещания, в этом случае передайте его функции установки состояния ловушки setPeople.

В настоящее время я получаю сообщение об ошибке TypeError: Cannot read property 'then' of undefined из моего вызова useEffect.

Я думаю, что конечная точка правильная, потому что эта команда работает и возвращает ожидаемые данные при запуске в моем терминале:

curl https://swapi.dev/api/people/\?results\=82

Я был бы очень благодарен, если бы кто-нибудь мог показать мне, как изменить один или обе мои функции, чтобы эта работа работала.

Answer 1

несколько проблем - одна в useEffect, вам нужно дождаться ответа от вызова requestInfo, поэтому:

useEffect(() => {
const getAsyncInfo = async () => {
  const res = await requestInfo('people', '82')
  setPeople(res)
}
getAsyncInfo()
}, [])

затем убедитесь, что вы возвращаете выборку из requestInfo, и это json() как функция - requestInfo также может использовать async / await, например:

export const requestInfo = async(resource, quantity) => {
  const res = await fetch(`https://swapi.dev/api/${resource}/?results=${quantity}`)
  const json = await res.json()
  return json.results
}