React中如何使Fetch获取的数据全局供其他组件访问？

当然可以！在React里让fetch回来的page.json数据全局供其他组件访问，有好几种实用方案，我结合你的场景给你拆解清楚：

这是React官方提供的全局状态共享方案，不需要额外依赖，适合中大型项目或者需要跨多层组件共享数据的场景。步骤很清晰：

首先创建一个Context文件，把fetch逻辑和数据封装进去：

// PageDataContext.js
import { createContext, useContext, useEffect, useState } from 'react';

// 创建Context
const PageDataContext = createContext();

// 写Provider组件，负责fetch数据并提供给子组件
export function PageDataProvider({ children }) {
  const [pageData, setPageData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchPageData() {
      try {
        const response = await fetch('/page.json');
        if (!response.ok) throw new Error('Failed to load page config');
        const data = await response.json();
        setPageData(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchPageData();
  }, []);

  return (
    <PageDataContext.Provider value={{ pageData, loading, error }}>
      {children}
    </PageDataContext.Provider>
  );
}

// 自定义钩子，简化组件调用
export function usePageData() {
  return useContext(PageDataContext);
}

然后在你的根组件（比如App.js）里用这个Provider包裹所有需要访问数据的组件：

// App.js
import { PageDataProvider } from './PageDataContext';
import Header from './Header';
import ComingSoonSection from './ComingSoonSection';

function App() {
  return (
    <PageDataProvider>
      <Header />
      <ComingSoonSection />
    </PageDataProvider>
  );
}

最后在任意子组件里，用我们写的自定义钩子获取数据：

// Header.js
import { usePageData } from './PageDataContext';

function Header() {
  const { pageData, loading, error } = usePageData();

  if (loading) return <div>Loading page config...</div>;
  if (error) return <div>Oops: {error}</div>;

  return (
    <header>
      <img src={pageData.logo.src} alt="Site Logo" />
      <button>{pageData.logout.text}</button>
    </header>
  );
}

如果你的项目特别小，不想搞复杂的Context，可以临时把数据挂在window对象上——但要注意，这种方式不够React化，不好调试和维护，只适合快速验证：

// 在根组件的useEffect里fetch并挂载到全局
useEffect(() => {
  async function loadGlobalData() {
    const res = await fetch('/page.json');
    const data = await res.json();
    window.globalPageData = data;
  }
  loadGlobalData();
}, []);

// 其他组件直接用
function ComingSoonSection() {
  if (!window.globalPageData) return <div>Loading...</div>;
  
  return (
    <div className="coming-soon">
      <h2>{window.globalPageData.comingSoon.title}</h2>
      <p>{window.globalPageData.comingSoon.text}</p>
    </div>
  );
}

如果你的项目已经在用Redux、Zustand这类状态管理库，或者需要对数据做修改、联动等复杂操作，可以把page数据放到全局store里。比如用Redux Toolkit的示例：

先创建一个slice处理数据请求：

// features/pageData/pageDataSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 异步请求方法
export const fetchPageData = createAsyncThunk(
  'pageData/fetchPageData',
  async () => {
    const response = await fetch('/page.json');
    return response.json();
  }
);

const pageDataSlice = createSlice({
  name: 'pageData',
  initialState: {
    data: null,
    status: 'idle', // idle/loading/succeeded/failed
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchPageData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPageData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchPageData.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default pageDataSlice.reducer;

配置好store后，在根组件包裹Provider，然后在组件里用useSelector获取数据，useDispatch触发请求即可。

总结一下选择建议： #

• 小型项目快速验证：全局变量（不推荐长期使用）
• 中大型纯React项目：Context API（原生无依赖，最推荐）
• 复杂状态管理需求：Redux/Toolkit或Zustand这类状态库

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