React打印学生详情时姓名对应图片格式错误修复

不需要修改现有db.js的数据结构，问题出在组件代码的3个写法错误上，按下面步骤调整即可得到预期输出。

问题原因 #

• 未正确导入db.js中的School数据，且School是数组结构，原代码中直接解构未定义的data变量，拿不到单个班级对应的student、images字段
• class是JavaScript保留关键字，不能直接作为变量名解构使用，会导致语法解析异常
• JSX语法中不能直接裸写/* 注释 */，这类写法会被当成普通内容解析，连带导致images变量被错误转成整个数组的逗号分隔字符串输出

修复后代码 #

1. db.js 无需修改 #

保持原有数据结构即可，记得最后加上导出语句：

const School = [
    { class: "First", student: ["sam", "anu", "rahul"], images: ["sam.jpg","anu.jpg","rahul.jpg"] },
    { class: "Second", student: ["anil", "sunil", "nikhil"], images: ["anil.jpg","sunil.jpg","nikhil.jpg"] }
];
export default School;

2. School.js 组件修复 #

如果只需要渲染First班的内容，代码如下：

import React from "react";
// 按你实际的文件路径导入db.js的数据
import School from "./db.js";

function Student() {
  // 取数组第一个元素（即First班的数据），class是保留字，重命名为classLevel
  const { class: classLevel, student, images } = School[0];

  return (
    <div>
      <p>{classLevel}</p>
      {student.map((name, index) => (
        <div
          key={name}
          className="student"
          data-answer={name}>
          {name}-{images[index]}
          {/* JSX注释必须包裹在大括号内，需要渲染图片时放开下面标签即可 */}
          {/* <img src={images[index]} alt="stud-img" /> */}
        </div>
      ))}
    </div>
  );
}

export default Student;

如果需要渲染所有班级的内容，把返回的JSX改成遍历整个School数组即可：

return (
  <div>
    {School.map((classItem) => {
      const { class: classLevel, student, images } = classItem;
      return (
        <div key={classLevel}>
          <p>{classLevel}</p>
          {student.map((name, index) => (
            <div
              key={name}
              className="student"
              data-answer={name}>
              {name}-{images[index]}
              <img src={images[index]} alt="stud-img" />
            </div>
          ))}
        </div>
      )
    })}
  </div>
)

效果验证 #

调整后页面渲染结果和预期完全一致：

First
sam-sam.jpg
anu-anu.jpg
rahul-rahul.jpg

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