Реагировать на состояние потери пользовательского хука ⇐ Javascript

[Anonymous]

Итак, я немного осваиваю реакцию и создаю несколько глупых веб-приложений для практики, и я столкнулся с проблемой, которую не могу здесь понять.
У меня есть специальный хук useGetRequest, который вызывает предоставленную ему конечную точку API и извлекает данные. У меня есть переменная состояния, позволяющая отслеживать, загружается ли она, загрузилась или произошла ошибка. Я передаю это состояние загрузки другому хуку, который затем передает его компоненту. Проблема в том, что к моменту попадания в компонент переменная loadingState не определена в каждой точке. Я могу проследить, что в обоих хуках состояние обновляется, но не тогда, когда компонент его получает. Вот мой код:

Код: Выделить всё

import {useCallback, useState} from "react";
import loadingStatus from "../helpers/loadingStatus"

const useGetRequest = (url) => {
const [loadingState, setLoadingState] = useState(loadingStatus.isLoading);

const get = useCallback(async () => {
console.log(loadingState);
setLoadingState(loadingStatus.isLoading);
try {
const rsp = await fetch(url);
const result = await rsp.json();
setLoadingState(loadingStatus.loaded);
return result;
} catch {
setLoadingState(loadingStatus.hasErrored);
}
}, [url]);

return {get, loadingState};
}

export default useGetRequest;

Мое глупое тренировочное приложение предназначено для TTRPG просто для некоторого контекста в этом хуке useWeapons:

Код: Выделить всё

import {useEffect, useState} from "react";
import useGetRequest from "@/hooks/useGetRequest";

const useWeapons = () => {
const [weapons, setWeapons] = useState([]);
const {get, loadingState } = useGetRequest("/api/weapons");

useEffect(() => {
const fetchWeapons =  async () => {
const weapons = await get();
console.log(loadingState);
setWeapons(weapons);
};
fetchWeapons();
}, [get]);

return [weapons, setWeapons, loadingState];
}

export default useWeapons;

Это компонент, который создает мое табличное представление:

Код: Выделить всё

import WeaponRow from "@/components/WeaponRow";
import useWeapons from "@/hooks/useWeapons";
import loadingStatus from "@/helpers/loadingStatus";
import LoadingIndicator from "@/components/loadingIndicator";

const WeaponList = () => {
const { weapons, setWeapons, loadingState } = useWeapons();

const addWeapon = () => {
setWeapons([
...weapons,
{
id: 2,
name: "Blaster pistol",
skill: "Ranged (Light)",
damage: 6,
critical: 3,
range: "medium",
encum: 1,
hp: 3,
price: 400,
rarity: 4,
special: "Stun setting",
description: "Most spacers carry standard blaster pistols. They pack enough punch to penetrate plastoid armor, have decent range, and are light enough to carry around at all times. Most scoundrels also appreciate the gunslinger-style look of a well-used blaster on their hip. \nSpacefarers who often have to fight aboard ship carry these weapons since the blast is effective against many types of armor, but isn't powerful enough to breach the hull of most vessels.  ",
models: "BlasTech DH-17 Blaster, BlasTech SE-14 and SE-14C Blaster Pistol",
image: "blasterPistol"
}
]);
}

if(loadingState !== loadingStatus.loaded) {
console.log(loadingState);
return ;
}
else
return(




Available Weapons





Name
Skill
Dam
Crit
Range
Encum
HP
Price
Rarity
Special



{weapons.map((w) => (

))}



Add


)
};

export default WeaponList;

Я уверен, что мне не хватает какой-то явно глупой детали, и я просто не вижу ее после пары часов возни с ней.
В качестве быстрого редактирования здесь можно обойти хук useWeapon и вызвать хук useGetRequest непосредственно в компоненте. Я думаю, что либо во вложенных хуках есть что-то, о чем я не знаю, либо у моего второго крючка проблема.

Подробнее здесь: https://stackoverflow.com/questions/793 ... sing-state