如何使用React Hooks跨组件传值并解决渲染undefined问题

两个方案渲染出undefined的核心错误是状态初始化时给学生数组多嵌套了一层方括号，数据结构不符合预期。
studentDetails本身已经是存储所有学生对象的一维数组，你写useState([studentDetails])时，外层额外的[]把studentdata变成了二维数组，实际结构为[[{学生1信息}, {学生2信息}, ...{学生5信息}]]，并非预期的一维学生列表。

旧方案报错逻辑 #

• 你将二维数组作为stuDetails传给B组件，在B内执行stuDetails.map遍历时，拿到的唯一元素是包裹在里层的整个学生数组，不是单个学生对象。
• 此时取val.studentID、val.studentName这类属性，本质是在数组类型的val上读取对象属性，自然返回undefined。你控制台能打印出完整数组，恰好是因为遍历拿到的val就是那层被嵌套的完整学生列表。

新方案报错逻辑 #

• 你在A组件内遍历二维数组studentdata，拿到的value同样是整个学生数组，而非单个学生对象。
• 此时读取value.studentID等属性拿到的全是undefined，传给B组件自然无法渲染有效值。除此之外新方案还有两个结构错误：一是表格的<tr>标签内必须嵌套<td>存单元格内容，直接放文本不符合HTML规范；二是每次遍历都重复渲染整个表格和表头，最终会生成5个重复的独立表格。

修复步骤 #

1. 去掉状态初始化时多余的外层方括号，直接将一维学生数组存入状态：

   // 错误写法
   // const [studentdata, setStudentData] = useState([studentDetails]);
   // 正确写法
   const [studentdata, setStudentData] = useState(studentDetails);
   

2. 推荐使用旧方案的传参思路（整组数据传给B组件，在B内遍历渲染行），结构更清晰，不会重复生成表头，修复后的完整代码如下：

组件A（Main） #

function Main() {
  const studentDetails = [
    { studentID: "001", studentName: "StuOne", studentMarks: "80" },
    { studentID: "002", studentName: "StuTwo", studentMarks: "90" },
    { studentID: "003", studentName: "StuThree", studentMarks: "60" },
    { studentID: "004", studentName: "StuFour", studentMarks: "70" },
    { studentID: "005", studentName: "StuFive", studentMarks: "85" },
  ];

  const [studentdata, setStudentData] = useState(studentDetails);

  return (
    <div>
      <Header />
      <Details stuDetails={studentdata} />
    </div>
  );
}

组件B（Details） #

function Details({ stuDetails }) {
  return (
    <div>
      <div className="Main">
        <table>
          <thead>
            <tr>
              <th>Student ID</th>
              <th>Student Name</th>
              <th>Student Mark</th>
            </tr>
          </thead>
          <tbody>
            {stuDetails.map((student) => (
              <tr key={student.studentID}>
                <td>{student.studentID}</td>
                <td>{student.studentName}</td>
                <td>{student.studentMarks}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

额外注意事项 #

• 遍历列表渲染React节点时，必须给遍历项的根节点加唯一key属性，这里用学生ID即可，避免React抛渲染警告、出现状态错位问题。
• 表格建议补上<thead>、<tbody>语义化标签，避免浏览器自动补全节点时出现结构错乱。
• 初始化数组、对象类型的状态时，多留意嵌套层级，不确定数据结构时可以打印typeof、Array.isArray()校验，避免层级错误导致属性读取失败。

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