如何在React JS UI模板中展示API获取的项目数据？

1. 梳理模板的Redux数据流结构 #

• 定位到模板存储项目数据的Redux模块（通常在src/store/projects目录），找到reducer里的初始模拟数据，示例如下：

  const initialState = {
    projects: [
      { project_id: 'mock-1', title: '模拟项目1', ... },
      // 其他模拟条目
    ]
  };
  

• 找到对应的action类型（比如FETCH_PROJECTS_SUCCESS）和action创建函数，模板里大概率是用模拟数据触发该action，后续要替换为API拉取的数据。

2. 用真实API请求替换Saga模拟逻辑 #

• 打开项目的saga文件（如src/store/projects/sagas.js），替换模拟逻辑为真实API请求：

  import { call, put, takeLatest } from 'redux-saga/effects';
  import { FETCH_PROJECTS, FETCH_PROJECTS_SUCCESS } from './actions';
  
  // 自定义API请求函数，替换为你的接口地址
  function fetchProjectsApi() {
    return fetch('/your-api-endpoint/projects')
      .then(res => res.json())
      .catch(err => { throw err; });
  }
  
  function* fetchProjects() {
    try {
      const projects = yield call(fetchProjectsApi);
      // 将API返回数据存入Redux store
      yield put({ type: FETCH_PROJECTS_SUCCESS, payload: projects });
    } catch (e) {
      // 可添加错误处理逻辑，比如触发失败action
    }
  }
  
  export default function* projectsSaga() {
    yield takeLatest(FETCH_PROJECTS, fetchProjects);
  }
  

• 确认该saga已注册到根saga（src/store/rootSaga.js）中，保证能被Redux-Saga监听执行。

3. 修改组件从Redux获取真实数据 #

• 编辑Projects-grid.js，替换模拟数据获取逻辑为从Redux store读取：

  import { useSelector } from 'react-redux';
  import CardProject from './card-project';
  
  const ProjectsGrid = () => {
    // 从Redux store取出项目列表
    const projects = useSelector(state => state.projects.projects);
  
    return (
      <div className="projects-grid">
        {projects.map(project => (
          <CardProject key={project.project_id} project={project} />
        ))}
      </div>
    );
  };
  
  export default ProjectsGrid;
  

• 如果模板用的是类组件+connect高阶组件，修改如下：

  import { connect } from 'react-redux';
  import CardProject from './card-project';
  
  class ProjectsGrid extends Component {
    render() {
      const { projects } = this.props;
      return (
        <div className="projects-grid">
          {projects.map(project => (
            <CardProject key={project.project_id} project={project} />
          ))}
        </div>
      );
    }
  }
  
  const mapStateToProps = state => ({
    projects: state.projects.projects
  });
  
  export default connect(mapStateToProps)(ProjectsGrid);
  

4. 更新CardProject组件展示真实字段 #

• 打开card-project.js，将硬编码的模拟内容替换为props传入的真实数据：

  const CardProject = ({ project }) => {
    return (
      <div className="card-project">
        <h3>{project.title}</h3>
        <span>项目ID: {project.project_id}</span>
        {/* 其他需要展示的字段，按需添加 */}
      </div>
    );
  };
  
  export default CardProject;
  

5. 触发API数据请求 #

• 在项目入口组件（如Dashboard.js或App.js）中，组件挂载时触发数据获取action：

  import { useEffect } from 'react';
  import { useDispatch } from 'react-redux';
  import { fetchProjects } from './store/projects/actions';
  import ProjectsGrid from './Projects-grid';
  
  const Dashboard = () => {
    const dispatch = useDispatch();
  
    useEffect(() => {
      // 组件挂载时请求数据
      dispatch(fetchProjects());
    }, [dispatch]);
  
    return <ProjectsGrid />;
  };
  
  export default Dashboard;
  

6. 验证效果 #

• 运行项目，通过Redux DevTools（若模板集成）查看store中是否正确存入API返回的项目数据。
• 检查UI是否正常渲染每个项目的真实标题、ID等字段，确认无模拟数据残留。

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