React中等待Fetch请求的最佳实践：如何简化非空检查？

你的代码场景 #

import React from "react";

function App() {

  const [colorsData, setColorsData] = React.useState();

  React.useEffect(() => {
    const url = `https://www.thecolorapi.com/scheme?hex=0047AB&rgb=0,71,171&hsl=215,100%,34%&cmyk=100,58,0,33&mode=analogic&count=6`
    fetch(url)
      .then(res => res.json())
      .then(data => setColorsData(data))
  }, [])

  console.log(colorsData);

  return (
    <div className="App">
      <h1>{colorsData ? colorsData.colors[0].hex.value : "Loading..."}</h1>
      <img src={colorsData ? colorsData.colors[0].image.named : "Loading..."} />
    </div>
  );
}
export default App;

你当前需要在每个元素中重复检查colorsData是否存在，否则会触发undefined错误，下面是几种优化方案和最佳实践：

优化方案 #

1. 单独维护加载状态（推荐用于复杂场景） #

新增isLoading状态变量，统一控制加载逻辑，避免重复检查：

import React from "react";

function App() {
  const [colorsData, setColorsData] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true); // 初始设为加载中

  React.useEffect(() => {
    const url = `https://www.thecolorapi.com/scheme?hex=0047AB&rgb=0,71,171&hsl=215,100%,34%&cmyk=100,58,0,33&mode=analogic&count=6`
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setColorsData(data);
        setIsLoading(false); // 请求完成关闭加载状态
      })
      .catch(err => {
        console.error("请求失败：", err);
        setIsLoading(false); // 出错也要关闭加载状态
      })
  }, [])

  // 加载中时直接返回统一UI，后续无需重复检查
  if (isLoading) {
    return <div className="App">Loading...</div>;
  }

  return (
    <div className="App">
      <h1>{colorsData.colors[0].hex.value}</h1>
      <img src={colorsData.colors[0].image.named} alt="Color preview" />
    </div>
  );
}
export default App;

这种方式能清晰区分加载、成功、错误三种状态，适合需要处理异常提示的复杂组件。

2. 可选链+空值合并（简洁写法，适合简单场景） #

用ES6的?.（可选链）和??（空值合并运算符）简化非空检查：

return (
  <div className="App">
    <h1>{colorsData?.colors[0].hex.value ?? "Loading..."}</h1>
    <img src={colorsData?.colors[0].image.named ?? ""} alt="Color preview" />
  </div>
);

?.会自动链式检查每个属性是否存在，只要有一个为null/undefined就返回undefined；??则在左侧为null/undefined时返回右侧默认值，无需写冗长的三元表达式。

3. 提前解构+默认值 #

如果需要多次用到colorsData.colors[0]，可以提前解构减少重复代码：

const firstColor = colorsData?.colors[0] ?? {};

return (
  <div className="App">
    <h1>{firstColor.hex?.value ?? "Loading..."}</h1>
    <img src={firstColor.image?.named ?? ""} alt="Color preview" />
  </div>
);

最佳实践总结 #

• 复杂组件/需要处理错误状态：优先用单独维护isLoading和error状态的方式，逻辑清晰且易维护。
• 简单展示场景：用可选链+空值合并运算符快速简化代码，减少重复检查。
• 任何场景都要记得处理请求失败的情况（加catch），避免组件一直卡在加载状态或报错。

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