我有一个React函数组件，它正在进行axios调用，将其设置为状态，并将在渲染中使用该数据。
当前代码：
WeatherPanel.jsx
import React, { useEffect, useState } from "react";
import getLocationData from "../api/getLocationData";
const WeatherPanel = () => {
const [locationData, setLocationData] = useState();
useEffect(() => {
async function populateLocationData() {
const data = await getLocationData();
setLocationData(data);
}
populateLocationData();
}, []);
return locationData ? (
<>
<div>Hello {locationData.woeid}</div>
</>
) : (
<>Loading</>
);
};
export default WeatherPanel;
ata.js
import axios from "axios";
const getLocationData = async () => {
const response = await axios.get("/api/location/44418/");
return response.data;
};
export default getLocationData;
问题:
好像我必须有位置数据？（保护渲染，因此加载部分会在useEffect中的useState完成之前尝试渲染，导致locationData.woeid未定义和中断。
这是正确/最好的处理方法吗？在尝试第一次渲染之前，功能组件是否有办法完成某些内容？
（我知道
谢谢！
您可以保持加载状态，并按如下方式处理：
import React, { useEffect, useState } from 'react';
import getLocationData from '../api/getLocationData';
const WeatherPanel = () => {
const [locationData, setLocationData] = useState();
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
async function populateLocationData() {
setIsLoading(true);
try {
const data = await getLocationData();
setLocationData(data);
setIsLoading(false);
} catch (error) {
console.log(error);
setIsLoading(false);
}
}
populateLocationData();
}, []);
function renderWeahter() {
if (isLoading) return <div>Loading...</div>;
return <div>Hello {locationData.woeid}</div>;
}
return <div>{renderWeahter()}</div>;
};
export default WeatherPanel;
