Блог

Главная - Вопросы по программированию - Как получить несколько API с помощью typescript в reactjs?

Как получить несколько API с помощью typescript в reactjs?

#reactjs #typescript #react-masonry

Вопрос:

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

 var photos_info = [];
async function get_photos(urls) {
  var promises = urls.map((url) => fetch(url).then((y) => y.json()));
  await Promise.all(promises).then((results) => {
    photos_info = results;
    return photos_info;
  });

  return photos_info;
}

Я хочу отобразить его в src в своем компоненте

 <ResponsiveMasonry columnsCountBreakPoints={columnsCountBreakPoints}>
      <Masonry gutter={4}>
        {
          <img src={} />
        }
      </Masonry>
    </ResponsiveMasonry>

Редактировать
Другой метод, использующий useState и useEffect

 const [photosList, setPhotosList] = useState<any>();
  useEffect(() => {
    const photosPromises = urls.map((url) =>
      fetch(url).then((res) => res.json())
    );
    Promise.all(photosPromises).then((data) => {
      setPhotosList(data);
    });
  }, []);
  console.log("hi", photosList);

Я попытался изобразить простой, просто чтобы посмотреть, что внутри

  <div>
      {photosList.map((photo: any) => {
        return <pre>{JSON.stringify(photo)}</pre>;
      })}
    </div>

но это дает мне эту ошибку, не удается прочитать свойство «карта» неопределенного

Комментарии:

1. Ваш код для вызова API выглядит в основном хорошо, если не считать того факта, что вы можете просто return Promise.all и не нуждаетесь в другом .then() в этой строке. Я думаю, что ваша проблема может заключаться в том, как вы можете выполнять асинхронные действия в своем компоненте react, и ответ на это, вероятно, просто useEffect ?

2. Предполагая, что вы используете функциональный компонент, я бы посоветовал вам найти учебник, в котором объясняется, как обрабатывать вызовы API с помощью useEffect и useState.

3. Спасибо, я поищу об эффекте использования.

4. @Evert, вы можете проверить редактирование. теперь, когда я console.log(photosList), он печатается дважды, один неопределенный, а другой-массив, я не знаю, как этого избежать, а также я не знаю, как зацикливаться на PhotosList, так как это дает мне ошибку, что он не определен.

5. Ваш компонент один раз визуализирует пустые данные, а затем еще долго после этого обещание разрешается и вызывает setPhotosList. Ваш компонент должен проверить наличие пустого регистра данных и отобразить состояние загрузки или пустоты, или вы должны инициировать состояние в пустом массиве useState([]) , если предпочитаете

Метки: