fetch返回第一个空数组，然后返回响应

Question

我正在制作我的最终学位项目，现在我参与了使用后端URL的数据在地图上显示城镇的部分。

问题是fetch首先返回一个空数组，我需要它保持加载，直到变量是一个有效的JSON。

const [isLoading, setLoading] = useState(true);
const [markers, setMarkers] = useState([]);
const getTowns = async () => {
try {
const response = await fetch(`${baseUrl}/towns`);
const json = await response.json();
setMarkers(json.data);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
useEffect(() => {
getTowns();
}, []);

另一个问题是:为什么当我放入console.log('whatever')时，它在控制台上出现了不止一次。不明白为什么

我需要的是获取setLoading(false)只有当响应是一个JSON，而不是一个空数组

Answer 1

你能做的就是在你的代码中添加这两个钩子:

• 返回响应的状态(初始值为空数组)
• 一个useEffect，一旦响应状态改变值，它将被设置为false isLoading

const [response, setResponse] = useState([]);
const getTowns = async () => {
try {
setResponse(() => await fetch(`${baseUrl}/towns`));
const json = await response.json();
setMarkers(json.data);
} catch (error) {
console.error(error);
}
};
useEffect(() => {
setLoading(() => false);
}, [response]);