Предположим, есть компонент React-хуков, который имеет несколько разделов, скажем, 14, внутри. Я не хочу разбивать каждый раздел на отдельные компоненты, но оставляю один компонент. Теперь каждый раздел содержит данные, извлеченные из отдельного вызова REST API. На странице будет отображаться загрузчик до тех пор, пока не будет загружен раздел, а при загрузке будет показан раздел, так что каждый раздел начинает отображаться случайным образом после каждого успешного вызова службы.
Должен ли я использовать отдельное состояние для каждого раздела - одно для данных и один для нагруженного состояния и отдельного useEffect, а также все можно объединить в один объект состояния и один useEffect для его обработки.
Пример кода того, что я сделал
const [A, setA] = useState([]);
const [ALoaded, setALoadedState] = useState(false);
const [B, setB] = useState([]);
const [BLoaded, setBLoadedState] = useState(false);
const [C, setC] = useState([]);
const [CLoaded, setCLoadedState] = useState(false);
useEffect(() => {
getA().then(response => {
setA(response);
setALoadedState(true);
});
getB().then(response => {
setB(response);
setBLoadedState(true);
});
getC().then(response => {
setC(response);
setCLoadedState(true);
});
}, []);
Учтите, что существуют состояния от А до N (14 секций). Если я продолжаю использовать useEffect () для каждого, он работает так же. Они отображаются в шаблоне как:
return (
<div>
{ ALoaded ? 'Show A' : 'Hide A' }
{ BLoaded ? 'Show B' : 'Hide B' }
{ CLoaded ? 'Show C' : 'Hide C' }
</div>
);
Если я использую api context context, что будет лучшим способом обновить контекст после завершения всех вызовов службы.
Есть ли лучший способ для всей реализации с реагирующими хуками и контекстным API?