React中处理未初始化state属性访问的最佳实践咨询

我写了一个React组件，用来根据传入的country prop查询对应首都的天气数据：

function DetailedView({ country }) {
  useEffect(() => {
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=${country.capital[0]}&appid=${process.env.REACT_APP_WEATHER_API_KEY}`
      )
      .then((response) => setWeather(response.data));
  }, [country]);

  const [weather, setWeather] = useState({});

组件里的weather初始是空对象，后续渲染时直接用点运算符访问属性会报错，我现在用判断对象是否为空的方式避免错误：

{Object.keys(weather).length !== 0 ? (
  <>
    <p>Temperature: {weather.main.temp - 273}</p>
    <img
      src={`http://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`}
      alt="icon"
    ></img>
    <p>Wind Speed: {weather.wind.speed} m/s</p>
  </>
) : (
  ""
)}

这种方法可行，但感觉不符合React惯用写法，想知道处理这种场景的最佳实践。

1. 初始化State为贴合数据结构的默认值 #

与其初始化为空对象，不如根据API返回的数据结构设置默认值，这样即使数据还没加载，访问属性时也不会报错，还能显示合理的占位内容：

const [weather, setWeather] = useState({
  main: { temp: 0 },
  weather: [{ icon: '' }],
  wind: { speed: 0 }
});

之后渲染时不用额外判断，直接访问属性即可，用户能看到基础的占位UI，体验更流畅。

2. 使用可选链操作符（Optional Chaining） #

ES6+的可选链?.是现在React项目里处理嵌套属性的常用方案，它能安全访问嵌套属性，若某个属性不存在则返回undefined，不会抛出错误。配合空值合并运算符??还能设置默认值：

<>
  <p>Temperature: {(weather.main?.temp ?? 0) - 273}</p>
  <img
    src={`http://openweathermap.org/img/wn/${weather.weather?.[0]?.icon ?? ''}@2x.png`}
    alt="weather icon"
  />
  <p>Wind Speed: {weather.wind?.speed ?? 0} m/s</p>
</>

这种写法简洁高效，省去了繁琐的空对象判断逻辑。

3. 添加加载状态 #

如果需要在数据加载时给用户明确的反馈，可以新增isLoading状态管理加载状态：

function DetailedView({ country }) {
  const [weather, setWeather] = useState({});
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=${country.capital[0]}&appid=${process.env.REACT_APP_WEATHER_API_KEY}`
      )
      .then((response) => setWeather(response.data))
      .finally(() => setIsLoading(false));
  }, [country]);

  if (isLoading) {
    return <p>加载天气数据中...</p>;
  }

  return (
    <>
      <p>Temperature: {weather.main.temp - 273}</p>
      <img
        src={`http://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`}
        alt="weather icon"
      />
      <p>Wind Speed: {weather.wind.speed} m/s</p>
    </>
  );
}

这种方式逻辑清晰，用户能直观感知数据加载状态，同时避免了空属性访问的问题。

4. 精准判断必要属性是否存在 #

如果不想修改初始State，也可以直接判断需要用到的属性是否存在，比判断整个对象是否为空更精准（毕竟API可能返回部分数据）：

{weather.main?.temp && weather.weather?.[0]?.icon && weather.wind?.speed && (
  <>
    <p>Temperature: {weather.main.temp - 273}</p>
    <img
      src={`http://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`}
      alt="weather icon"
    />
    <p>Wind Speed: {weather.wind.speed} m/s</p>
  </>
)}

只有当所有必要属性都存在时才渲染内容，避免了因部分数据缺失导致的报错。

内容的提问来源于stack exchange，提问作者bugsyb