React多组件实现表格无报错但无法显示问题求助

核心问题 #

1. TableDisplay组件的map函数未返回元素：map的箭头函数使用大括号但未显式返回TableRows组件，导致无任何元素渲染。
2. TableRows组件职责错误：该组件当前会渲染完整表格（含表头和重复行），但它的职责应该是仅渲染单一行数据，同时代码硬编码了prefix和number值，未使用传入的row数据。

修复后的代码 #

1. 修复TableDisplay.js #

将表格框架移至此处，同时修正map函数的返回逻辑：

import TableRows from "./TableRows"

const TableDisplay = ({rows}) => {
  return (
    <div className="container">
      <table className="table table-striped">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Description</th>
            <th scope="col">Semester</th>
            <th scope="col">Prefix</th>
            <th scope="col">Number</th>
            <th scope="col">Grade</th>
            <th scope="col">Editing</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <TableRows key={row.id} row={row}/>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default TableDisplay

2. 修复TableRows.js #

改为仅渲染单一行，并使用传入的row数据：

import React from 'react'

const TableRows = ({row}) => {
  return (
    <tr>
      <th scope="row">{row.id}</th>
      <td>{row.description}</td>
      <td>{row.semester}</td>
      <td>{row.prefix}</td>
      <td>{row.number}</td>
      <td>{row.grade}</td>
      <td><button type="button" className="btn btn-warning">Edit</button></td>
    </tr>
  )
}

export default TableRows

3. App.js（无需修改） #

import Form from './components/Form'
import { useState } from 'react'
import TableDisplay from './components/TableDisplay'

const App = () => {
    const [rows, setRows] = useState([
        {
            id:1,
            description:'',
            semester:'',
            prefix:'ENG',
            number:'368/371',
            grade:'',
            editing:''
        },
        {
            id:2,
            description:'',
            semester:'',
            prefix:'',
            number:'',
            grade:'',
            editing:''
        },
        {
            id:3,
            description:'',
            semester:'',
            prefix:'',
            number:'',
            grade:'',
            editing:''
        },
    ])

  return (
    <div className="container">
      <Form/>
      <TableDisplay rows={rows}/>
    </div>
  );
}
export default App;

修复说明 #

• 调整组件职责：TableDisplay负责渲染完整表格框架，TableRows仅处理单行数据渲染，符合React组件单一职责原则。
• 修正map函数返回逻辑，确保每个状态中的row都能生成对应的表格行。
• 替换硬编码数据，使用传入的row对象属性，保证数据与状态一致。

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