时间戳

首页 > 解决方案 > 在 REACT 中使用 fetch 获取外部 JSON 数据？

javascript - 在 REACT 中使用 fetch 获取外部 JSON 数据？

问题描述

我正在尝试构建一个 REACT 网页，该网页显示加载到 .json 文件中的信息，该文件不断被单独的 Python 脚本添加/删除。

我的问题是我似乎无法正确获取 JSON 信息，它总是返回一个我似乎无法解析值的承诺 - 阻止我的代码进一步向下使用 .map 函数。

// A card used to store warrant information
const WarrantCard = () => {
    let JSONDataPromise = fetch('data/ingame.json').then(response =>
        response.json().then(data => ({
            data: data,
            status: response.status
        }))
    )
    console.log(JSONDataPromise)
    let JSONData = JSONDataPromise.then(function(value){
        return value
    })
    console.log("Is the JSON Data loaded correctly?")
    console.log(JSONData)
    console.log("By now hopefully it is?")
    return (
        <div>
            {JSONData.map((postDetail)=>{
                // Using the data from our .json file, fill in the fields in our WarrantCards

这是我输出日志时得到的：在此处输入图像描述

我从网上尝试了许多不同的解决方案，但似乎都没有奏效。完全免责声明我对 js 很陌生，真的不知道我在做什么。

标签： javascriptjsonreactjs

解决方案

React 的主要特点是状态。基本上一切都围绕着它。因此，您需要做的是创建一个可以存储 JSON 数据的状态。最初您不会有任何数据，因为您的组件尚未渲染，因此无法下载数据。

使用该useEffect钩子，您可以在状态发生变化、安装组件或卸载组件时采取行动。第一个参数是发生更改时需要调用的函数。通过传递一个空数组[]作为第二个参数，您可以向组件指示，只要组件第useEffect一次呈现，就应该调用其中的函数。这是您想要获取数据的地方。

然后，在您获得数据后，更新您之前创建的状态。这种状态变化将导致重新渲染。但是因为状态现在有数据，它可以根据这些数据呈现一些东西。

const WarrantCard = () => {
  const [jsonData, setJsonData] = useState(null);

  const getJsonData = async () => {
    const response = await fetch('data/ingame.json');
    const data = await response.json();
    return data;
  };

  useEffect(() => {
    getJsonData().then(data => {
      setJsonData(data);
    }); 
  }, []);

  if (jsonData === null) {
    return null;
  }

  return (
    <div>
      {jsonData.map(({ user, tags, server }) => {
        ...
      })};
    </div>
  );
}

推荐阅读