React中如何将MongoDB数据填充至Grid组件的数据源数组？

核心思路是编写一个数据映射函数，把从接口拿到的MongoDB文档转换成Grid组件需要的字段结构，再将转换后的数组作为Grid的数据源。

步骤1：编写数据转换函数 #

创建一个函数，接收单个接口返回的文档对象，返回符合Grid要求的结构：

// 转换单个招聘数据的结构
const transformRecruitData = (doc) => {
  return {
    // 映射基础字段
    RecruitName: doc.name || '未知',
    RecruitEmail: doc.email || '无邮箱',
    PhoneNumber: doc.mobile_number || '无手机号',
    // 处理数组类型的字段：转成字符串展示
    Degree: doc.degree?.join(', ') || '无学历',
    Skills: doc.skills?.join(', ') || '无技能',
    // 状态相关（可根据业务需求自定义）
    Status: 'pending', // 可根据实际业务逻辑动态设置，比如结合工作经验判断
    StatusBg: '#FB9678', // 对应状态的背景色
    // 头像/图片（无接口返回图片时用默认图）
    ProductImage: product6 // 替换成你实际的默认图片变量
  };
};

步骤2：修改数据获取逻辑 #

在useEffect中，拿到接口返回的数组后，用map调用转换函数，把所有文档转换成目标结构：

const [recruitList, setRecruitList] = useState([]);

useEffect(() => {
  axios.get("http://localhost:8080/read")
    .then((res) => {
      // 对返回的每条数据进行结构转换
      const transformedData = res.data.map(doc => transformRecruitData(doc));
      setRecruitList(transformedData);
    })
    .catch(err => {
      console.error('获取数据失败:', err);
    });
}, []);

步骤3：将转换后的数据传给Grid组件 #

把Grid组件的数据源从静态的recruitsData替换成状态recruitList（假设你的Grid组件用dataSource属性接收数据）：

// 假设你的Grid组件使用方式如下
<GridComponent
  dataSource={recruitList}
  columns={ordersGrid}
  // 其他配置项...
/>

额外优化说明 #

• 若需要动态设置Status和StatusBg，可在转换函数中根据文档字段判断，例如：

  Status: doc.total_experience >= 3 ? 'active' : 'pending',
  StatusBg: doc.total_experience >= 3 ? '#00E396' : '#FB9678'
  

• 使用?.可选链操作符处理可能为空的字段，避免undefined报错。

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