使用React从S3文本文件中获取JSON数据

我试图使用React（在一个Gatsby项目中）从一个s3存储桶获取JSON数据

这是我的密码

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;

---

我该怎么做？在《盖茨比》中可能有一种简单的方法可以做到这一点，但我打算使用React。

您的代码有两个问题：

您不能返回等待承诺的组件

获取跨域资产需要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;

import React，{useState，useffect}来自“React”；
函数getJson（）{
返回获取（'http://secstat.info/testthechartdata.json')
.then（response=>response.json（））
.catch（错误=>{
控制台错误（error）；
});
}
常量mycop=（）=>{
const[list，setList]=useState（[]）；
useffect（（）=>{
getJson（）.then（list=>setList（list））；
}, []);
返回(

{list.map（项=>(
{item.name}
))}

);
};
导出默认mycop；

您的代码有两个问题：

您不能返回等待承诺的组件

获取跨域资产需要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;

import React，{useState，useffect}来自“React”；
函数getJson（）{
返回获取（'http://secstat.info/testthechartdata.json')
.then（response=>response.json（））
.catch（错误=>{
控制台错误（error）；
});
}
常量mycop=（）=>{
const[list，setList]=useState（[]）；
useffect（（）=>{
getJson（）.then（list=>setList（list））；
}, []);
返回(

{list.map（项=>(
{item.name}
))}

);
};
导出默认mycop；

您能解释一下代码在做什么吗@felixmoshGatsby使用React组件，因此，您需要返回一个。我使用了

useffect

&

useState

react钩子，您可以在这里阅读，您能解释一下代码在做什么吗@felixmoshGatsby使用React组件，因此，您需要返回一个。我使用了

useffect

和

useState

react挂钩，您可以在这里阅读