Question

当前，我想知道从外部源（json）获取的静态数据应该在哪里/如何保存。因此，更确切地说，我正在使用防暴API。现在，我正在获取有关最近10到20场比赛的信息。在获取的数据中，我得到如下信息：

{
 gameId: 125,
 championId: 12,
 timestamp: xxxx,
 role: BOTTOM
},
{
 gameId: 121231,
 championId: 1,
 timestamp: xxxx,
 role: BOTTOM
}

从这开始，最重要的是championId，通过它我可以从http://ddragon.leagueoflegends.com/cdn/6.24.1/data/en_US/champion.json找到特定的冠军信息

正如您在此json中看到的那样，所有冠军数据都已存储。因此，最好的办法是将其作为静态变量存储在客户端的某个位置。但是我不确定我想将其存储在顶级复合状态中的最佳位置是什么，但这似乎很愚蠢（？）。另一个想法是foreach匹配数据从此json url中获取数据，然后根据id返回冠军数据，但这将需要为每个匹配数据向Champion.json url发出请求。

还有其他想法应该怎么做？

Answer 1

您有几种选择：

将其保存为顶级组件状态，并将其传递给需要它的任何组件。
使用context。
将其放在自己的模块中，任何需要它的组件都可以请求。

＃3与您在此处编写的内容类似：

另一个想法是让每个匹配数据都从此json url中获取数据，而不是根据id返回冠军数据，但这将要求对每个匹配数据都对Champion.json url进行请求。

...但是不必每次都重新请求数据。简单地：

const matchDataPromise =
    fetch(/*...*/)
    .then(res => {
        if (!res.ok) {
            throw new Error("HTTP error " + res.status);
        }
        return res.json();
    });
export default matchDataPromise.

任何需要它的组件都会做：

import matchDataPromise from "./matchData.js";

然后在componentDidMount中使用承诺。

数据只会被提取一次，但是每个组件都需要处理它异步获取数据的事实。

从外部json文件React

1 个答案: