JSON данных из текстового файла S3 с использованием React

Question

Я пытаюсь получить JSON данные из корзины s3 с помощью React (в проекте Gatsby).

Это мой код.

import React from 'react';


function getJson() {
    return fetch("http://secstat.info/testthechartdata.json")
    .then((response) => response.json())
    .then((responseJson) => {
      return <div>{responseJson[0]}</div>;
    })
    .catch((error) => {
      console.error(error);
    });
 };


 export default getJson;

Это ошибка Я получаю.

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Как мне это сделать? Вероятно, есть простой способ сделать это в Гэтсби, но я собирался использовать React.

Answer 1

В вашем коде 2 проблемы:

1. Невозможно вернуть компонент, ожидающий Promise.
2. Для извлечения междоменных активов потребуется CORS Заголовки в вашем S3

Вы должны изменить его на что-то вроде этого:

import React, { useState, useEffect } from 'react';

function getJson() {
  return fetch('http://secstat.info/testthechartdata.json')
    .then(response => response.json())
    .catch(error => {
      console.error(error);
    });
}

const MyComp = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    getJson().then(list => setList(list));
  }, []);

  return (
    <ul>
      {list.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};
export default MyComp;