Где хранить статические данные, извлеченные из внешнего файла JSON React

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

Как вы можете видеть в этом файле, все данные чемпиона хранятся.Поэтому лучше всего хранить его как статическую переменную в каком-то месте на стороне клиента.Но я не уверен, что это лучшее место, о котором я думал, чтобы хранить его в состоянии компоновки верхнего уровня, но это кажется глупым (?).Еще одна идея заключалась в том, чтобы получить данные о совпадении, извлекаемые из этого URL-адреса json, а затем возвращать данные чемпиона в соответствии с id, но для этого нужно было бы запрашивать URL-адрес champion.json для каждого совпадения.

Любые другие идеи о том, какчто должно быть сделано?

Answer 1

У вас есть несколько вариантов:

1. Сохраните его как состояние компонента верхнего уровня и передайте его всем компонентам, которые в этом нуждаются.

2. Использование context .

3. Поместите его в свой собственный модуль, который может запрашивать любой компонент, которому он нужен.

# 3 похож на то, что вы написали здесь:

Другая идея заключалась в том, чтобы получать данные о совпадениях из этого URL-адреса json, а затем возвращать данные чемпионов в соответствии с id, но для этого нужно было бы запрашивать URL-адрес champion.json для каждого совпадения.

... но нет необходимости каждый раз повторно запрашивать данные. Просто:

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, принять обещание.

Данные будут выбираться только один раз, но каждый компонент должен обрабатывать тот факт, что он получает данные асинхронно.