React中使用map生成指定结构新数组失败，求解决方案

云原生阿岚

2026-7-23

问题解决方法

你的代码问题出在map回调的返回值处理上，另外原始数据里的first和last字段带有多余单引号，也需要处理才能得到干净的label。

核心错误点

箭头函数中直接用大括号写对象字面量时，JS会把它当成函数体而非返回值，必须做以下两种修改之一：

在对象前加return关键字
把对象用小括号()包裹起来

修正后的完整代码

import { useEffect, useState } from 'react';
import axios from 'axios';

function StudentList() {
  const [students, setStudents] = useState([]);
  const [formattedStudents, setFormattedStudents] = useState([]);

  useEffect(() => {
    // Axios请求获取学生数据
    axios.get('/your-student-api-url')
      .then(res => {
        setStudents(res.data);
        // 格式化生成目标数组
        const temp = res.data.map(student => {
          // 去除first、last字段里的多余单引号
          const cleanFirst = student.first.replace(/'/g, '');
          const cleanLast = student.last.replace(/'/g, '');
          // 用模板字符串拼接label，明确返回对象
          return {
            label: `${cleanFirst}, ${cleanLast} ${student.student_id}`,
            value: student.id
          };
        });
        setFormattedStudents(temp);
      })
      .catch(err => console.error('获取数据失败:', err));
  }, []);

  return (
    <div>
      {/* 示例：用格式化后的数组渲染下拉框 */}
      <select>
        {formattedStudents.map(item => (
          <option key={item.value} value={item.value}>{item.label}</option>
        ))}
      </select>
    </div>
  );
}

export default StudentList;