React项目中如何传递从Web API获取的JSON数据？

核心问题原因 #

你遇到的问题本质是异步操作的执行顺序和React组件的渲染机制导致的：

• fetch是异步任务，组件初始渲染时，then回调还没执行，此时全局变量/数组还没被赋值，自然显示undefined或为空。
• 普通全局变量无法触发React组件重新渲染，就算后续数据赋值成功，组件也不会更新展示新数据。

解决思路1：用React内置状态管理（useState + useEffect） #

这是最基础的方案，适合单个组件或父子组件间传递数据：

1. 用useState定义存储事件的状态，初始值设为空数组。
2. 用useEffect在组件挂载时执行fetch请求，请求成功后更新状态。
3. React会自动监听状态变化，触发组件重新渲染，此时就能拿到最新数据。

示例代码：

import { useState, useEffect } from 'react';

const Planner = () => {
  // 定义存储事件的状态
  const [events, setEvents] = useState([]);
  const BaseUrl = '你的API基础地址';

  // 组件挂载时执行fetch请求
  useEffect(() => {
    fetch(BaseUrl + '/api/eventreader/6', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
      },
    })
    // 先校验响应是否成功
    .then(response => {
      if (!response.ok) throw new Error('数据请求失败');
      return response.json();
    })
    .then(json => {
      // 将获取到的数据存入状态
      setEvents(json);
    })
    .catch(error => {
      console.error('获取数据出错:', error);
    });
  }, []); // 空依赖数组确保只执行一次

  // 直接使用events状态渲染，或传递给子组件
  return (
    <div className="planner">
      {events.length === 0 ? (
        <p>加载中...</p>
      ) : (
        events.map(event => (
          <div 
            key={`${event.Year}-${event.Month}-${event.Day}-${event.Title}`}
            className="event-item"
          >
            <h3>{event.Title}</h3>
            <p>{event.Year}/{event.Month}/{event.Day} | {event.Tag}</p>
          </div>
        ))
      )}
      {/* 传递给子组件示例 */}
      {/* <EventCalendar events={events} /> */}
    </div>
  );
};

export default Planner;

解决思路2：跨组件传递用Context API #

如果多个无直接层级关系的组件都需要使用事件数据，推荐用React Context API实现全局数据共享：

1. 创建事件上下文文件EventContext.js：

import { createContext, useContext, useState, useEffect } from 'react';

const EventContext = createContext();

// 定义数据提供者组件
export const EventProvider = ({ children }) => {
  const [events, setEvents] = useState([]);
  const BaseUrl = '你的API基础地址';

  useEffect(() => {
    fetch(BaseUrl + '/api/eventreader/6', {
      method: 'GET',
      headers: { 'Accept': 'application/json' },
    })
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(json => setEvents(json))
    .catch(err => console.error(err));
  }, []);

  return (
    <EventContext.Provider value={{ events }}>
      {children}
    </EventContext.Provider>
  );
};

// 自定义钩子，简化上下文调用
export const useEvents = () => useContext(EventContext);

2. 在根组件中包裹需要共享数据的组件：

import { EventProvider } from './EventContext';
import Planner from './Planner';
import EventStats from './EventStats';

function App() {
  return (
    <EventProvider>
      <Planner />
      <EventStats />
    </EventProvider>
  );
}

3. 在任意子组件中通过钩子获取数据：

import { useEvents } from './EventContext';

const EventStats = () => {
  const { events } = useEvents();
  const workEvents = events.filter(e => e.Tag === '工作');

  return (
    <div className="stats">
      <h2>事件统计</h2>
      <p>总事件数：{events.length}</p>
      <p>工作事件数：{workEvents.length}</p>
    </div>
  );
};

解决思路3：大型项目用状态管理库 #

如果项目复杂度高、数据交互频繁，可以用Redux、Zustand等状态管理库，它们能更高效地处理全局数据的更新与共享，用法和Context类似，但提供了更完善的状态变更追踪、缓存等能力。

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