如何更新React全局Context与状态？多组件共享状态异常排查

问题根源 #

1. 数据获取逻辑绑定在Map组件中，只有当Map被渲染时才会触发API请求。如果用户直接访问ActivityList所在路由，Map未加载，全局状态始终是初始空数组。
2. Map组件未更新isLoading状态，导致自身一直显示加载提示，无法正确展示数据，同时也无法让其他组件感知数据加载状态。

修复方案 #

1. 重构Store组件，将数据获取逻辑移至全局状态层 #

把API请求和状态管理统一放在Store中，确保应用启动时自动获取数据，所有子组件都能共享最新状态：

import React, { useState, useEffect } from "react";
import axios from "axios";

const initState = [];

export const GlobalContext = React.createContext();

const Store = ({ children }) => {
  const [activities, setActivities] = useState(initState);
  const [isLoading, setIsLoading] = useState(true);

  // 封装API请求
  const getActivityData = async () => {
    const response = await axios.get("http://localhost:8800/api/");
    return response.data;
  };

  // 更新全局状态
  const setActivitieData = async () => {
    try {
      const activityData = await getActivityData();
      setActivities(activityData);
    } catch (err) {
      console.error("获取数据失败:", err);
    } finally {
      setIsLoading(false);
    }
  };

  // 组件挂载时自动获取数据
  useEffect(() => {
    setActivitieData();
  }, []);

  // 将状态和方法统一封装到context值中
  const contextValue = {
    activities,
    setActivities,
    isLoading
  };

  return (
    <GlobalContext.Provider value={contextValue}>
      {children}
    </GlobalContext.Provider>
  );
};

export default Store;

2. 简化Map组件，使用全局状态 #

移除Map组件内的状态和请求逻辑，直接从Context获取全局状态：

import React, { useContext } from "react";
import { GlobalContext } from "./Store";

function Map() {
  const { activities, isLoading } = useContext(GlobalContext);

  return !isLoading ? (
    <>
      <MapComp activityData={activities} />
    </>
  ) : (
    <div>
      <p>Loading...</p>
    </div>
  );
}

export default Map;

3. 优化ActivityList组件，处理加载状态和空数据 #

从Context获取全局状态和加载状态，添加加载提示，并确保遍历时有唯一key：

import React, { useContext } from 'react';
import { GlobalContext } from "./Store";

function ActivityList() {
  const { activities, isLoading } = useContext(GlobalContext);

  // 显示加载提示
  if (isLoading) {
    return <div><p>加载活动数据中...</p></div>;
  }

  // 处理空数据情况
  if (activities.length === 0) {
    return <div><p>暂无活动数据</p></div>;
  }

  return (
    <>
      <p>活动列表</p>
      {activities.map((activity) => (
        <div key={activity.id} className="activity-item">
          <p>{activity.name}</p>
          <p>{activity.distance}m</p>
        </div>
      ))}
    </>
  );
}

export default ActivityList;

关键说明 #

• 将数据获取逻辑移至Store后，只要应用启动就会自动请求数据，无论用户访问哪个路由，全局状态都会被正确初始化。
• 全局维护isLoading状态，确保所有组件的加载提示保持一致，避免多组件各自维护状态导致的不一致问题。
• React状态更新是异步的，不要在调用setActivities后立即依赖activities的当前值，如需监听状态变化，可使用useEffect钩子。

内容的提问来源于stack exchange，提问作者program.exe