如何用React Context简化数组传递，替代LocalStorage实现

背景 #

当前你在入口组件从接口获取数据并存入LocalStorage，子组件读取LocalStorage数据进行渲染，希望用React Context替代LocalStorage，且不需要复杂的dispatch逻辑（仅需读取数据）。

简化实现步骤 #

1. 创建只读共享Context

先定义一个用于存储共享数据的Context，搭配类型定义保证类型安全：

import React from 'react';

// 定义共享数据的类型
interface AppSharedData {
  libraries: unknown[];
  softwareComponents: unknown[];
}

// 创建Context，设置初始空值
const AppDataContext = React.createContext<AppSharedData>({
  libraries: [],
  softwareComponents: []
});

export default AppDataContext;

2. 改造入口组件为Context Provider

把原来的入口组件改造成Context的提供者，在内部完成数据请求，将处理后的数据通过Context传递给子组件：

import React from 'react';
import AppDataContext from './AppDataContext';

function AppDataProvider({ children }: { children: React.ReactNode }) {
  // 用state存储请求到的处理后的数据
  const [sharedData, setSharedData] = React.useState<AppSharedData>({
    libraries: [],
    softwareComponents: []
  });

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const libraries: unknown[] = await sendRequest('/libraries');
        const softwareComponents: unknown[] = await sendRequest('/softwareComponents');
        
        // 处理数据并更新state
        const processedLibs = arraySetup(libraries, 'libraries');
        const processedComponents = arraySetup(softwareComponents, 'software-components');
        
        setSharedData({
          libraries: processedLibs,
          softwareComponents: processedComponents
        });
      } catch (err) {
        console.error(err);
      }
    };

    isAuthenticated() && fetchData();
  }, []);

  // 将数据作为Context的value传递给子组件
  return (
    <AppDataContext.Provider value={sharedData}>
      {children}
    </AppDataContext.Provider>
  );
}

export default AppDataProvider;

之后在应用根节点用这个Provider包裹所有需要访问数据的组件：

// 根组件示例（如index.tsx）
import AppDataProvider from './AppDataProvider';
import MainContent from './MainContent';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <AppDataProvider>
    <MainContent />
  </AppDataProvider>
);

3. 子组件直接读取Context数据

子组件不再需要读取LocalStorage，直接通过useContext获取共享数据：

import React from 'react';
import AppDataContext from './AppDataContext';

function StatsComponent() {
  // 从Context获取数据
  const { libraries, softwareComponents } = React.useContext(AppDataContext);
  const combinedData = [...libraries, ...softwareComponents];

  const getDataLength = (category: string) => {
    return combinedData.filter((item: any) => item.category === category).length;
  };

  return (
    <React.Fragment>
      <OwcGrid item xs={12} s={4}>
        <LibrariesCard numberOfElements={getDataLength('libraries')} />
      </OwcGrid>
    </React.Fragment>
  );
}

export default StatsComponent;

核心简化逻辑 #

• 无需使用useReducer和dispatch：因为你只需要读取共享数据，不需要修改状态，直接用useState管理请求结果即可
• 逻辑对齐原LocalStorage版本：只是把数据存储从LocalStorage换成了React状态+Context，原有数据处理逻辑完全保留
• 类型安全：通过TypeScript接口定义共享数据类型，避免any带来的类型风险

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