React useState加载未更改

Question

我在尝试显示尚未提取的数据时遇到错误，所以..我想在提取数据之前显示加载，但我的"setIsLoading"即使设置为true也总是返回false。

我是不是错过了一些显而易见的东西？我对勾手还很陌生。

const Pokedex = () => {
const [data, setData] = useState({});
const [isLoading, setIsLoading] = useState(false);
const pokemonId = 1;
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
const result = await axios(
`https://pokeapi.co/api/v2/pokemon/${pokemonId}`
);
setData(result.data);
};
fetchData();
setIsLoading(false);
}, [pokemonId]);
console.log("loading: ", isLoading);

Answer 1

在获取请求完成后，您需要立即更改isLoading状态。

useEffect(() => {
const fetchData = async () => {
const result = await axios(
`https://pokeapi.co/api/v2/pokemon/${pokemonId}`
);
setData(result.data);
setIsLoading(false);
};
fetchData();
}, []);

不要依赖于在挂钩之外打印东西，因为你不会得到真正的反馈。您可以使用render方法(在返回中，使用JSX代码(或在钩子内部使用。

此外，由于刷新组件时会重置状态，因此可以依赖于将isLoading初始化为true。这样，您只需要在获取请求后更改它。

你可以在这里查看工作演示。

Answer 2

首先，如果您正在调用异步函数，则您正在匿名创建Promise<void>，因此之后，检查promise是否成功的好方法是使用promise API中的then或catch方法。

示例解决方案。

const fetchData = async () => {
setIsLoading(true);
const result = await axios(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`);
setData(result.data);
};
fetchData().then(() => {
setIsLoading(false)
})

Answer 3

首先，我认为您的加载状态应该初始化为true。

const [isLoading, setIsLoading] = useState(true);

然后，在异步函数内将加载状态设置为false

useEffect(() => {
const fetchData = async () => {
const result = await axios(
`https://pokeapi.co/api/v2/pokemon/${pokemonId}`
);
setData(result.data);
setIsLoading(false);
};
fetchData();
}, [pokemonId]);