React对接Node.js API时isLoading状态及数据渲染问题求助

问题根源 #

1. 初始渲染时isLoading默认值为false，导致首次渲染直接跳过加载组件，执行console.log(planes)输出初始空数组，之后才进入useEffect设置isLoading为true触发重渲染。
2. 单个plane的请求复用同一个isLoading状态，当加载单个plane时，planes数组已有数据，之前靠planes.length == 0判断加载状态的逻辑完全失效。

解决步骤 #

• 拆分加载状态：用isPlanesLoading管理列表加载状态，isPlaneLoading管理单个plane的加载状态，避免状态冲突。
• 初始设置isPlanesLoading为true，确保首次渲染直接进入加载状态，不会提前输出空数组。
• 渲染时分别判断两个加载状态，精准控制加载组件的显示时机。

修改后的代码 #

function App() {
  const [planes, setPlanes] = useState([]);
  const [plane, setPlane] = useState();
  const [id, setId] = useState(0);
  // 拆分独立的加载状态
  const [isPlanesLoading, setIsPlanesLoading] = useState(true);
  const [isPlaneLoading, setIsPlaneLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const fetchedPlanes = await getAllPlanes();
        if (Array.isArray(fetchedPlanes)) {
          setPlanes(fetchedPlanes);
        } else {
          console.error("Error: getAllPlanes did not return an array");
        }
      } catch (error) {
        console.error("Error fetching planes:", error);
      } finally {
        setIsPlanesLoading(false);
      }
    };

    fetchData();
  }, []);

  function handleId(id) {
    setId(id);
  }

  useEffect(() => {
    if (id === 0) return;
    setIsPlaneLoading(true);
    const fetchData = async () => {
      try {
        const fetchedPlane = await getPlaneById(id);
        if (fetchedPlane) {
          setPlane(fetchedPlane);
        } else {
          console.error("Error fetching a plane");
        }
      } catch (error) {
        console.error(error);
      } finally {
        setIsPlaneLoading(false);
      }
    };

    fetchData();
  }, [id]);

  // 列表加载中时显示全局加载
  if (isPlanesLoading) {
    return <Spin />;
  }
  // 单个plane加载中，可选择全局加载或局部加载（比如仅在详情区域显示Spin）
  if (isPlaneLoading) {
    return <Spin />;
  }

  console.log(planes); // 仅在列表数据加载完成后执行
  return (
    <DataContext.Provider value={{ plane, planes, handleId }}>
      ...
    </DataContext.Provider>
  );
}

额外说明 #

如果不想在加载单个plane时全局隐藏内容，可以只在详情组件内部渲染Spin，保留列表区域的显示，提升用户体验。拆分状态后，能精准控制不同请求的加载状态，彻底解决状态冲突导致的提前输出空数组问题。

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