Reactstrap table header 和 table body 不匹配

Question

我正在尝试使用 Reactstrap Table 来显示 JSON 数据，但是 table header 和 table [=33] 之间存在不匹配=].我不知道为什么。我按照 Reactstrap 文档中的说明进行操作，但它不起作用。

import React, {Component} from 'react';
import {Table} from "reactstrap";

class Teacher extends Component{
    constructor(props) {
        super(props);

    }

    render() {
        const teacher = this.props.teachers.map((teacher)=>{
            return(
                <tbody>
                    <div key={teacher.foreign_teacher_id}>
                        <tr>
                            <td>{teacher.foreign_teacher_name}</td>
                            <td>{teacher.weekly_expected_hours}</td>
                            <td>{teacher.start_time}</td>
                            <td>{teacher.end_time}</td>
                            <td>{teacher.work_base}</td>
                            <td>{teacher.gmt_modified}</td>
                        </tr>
                    </div>
                </tbody>
            )
        })

        return (
            <div>
                <div className="container">
                    <div className="row">
                        <div className="col-12">
                            <h3>Teacher Table</h3>
                        </div>
                        <div className="row">
                            <Table>
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Expected Work Hours(weekly)</th>
                                        <th>Start Time</th>
                                        <th>End Time</th>
                                        <th>Work Base</th>
                                        <th>Confirm Date</th>
                                    </tr>
                                </thead>
                                {teacher}
                            </Table>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

export default Teacher;

export const TEACHERS =
    [
        {
            "foreign_teacher_id": 1357176579309965300,
            "batch_id": 1359373999368310800,
            "foreign_teacher_name": "Xanthe Dunning",
            "weekly_expected_hours": 8,
            "record_id": 1359373999368310800,
            "start_time": "2021-02-16T19:00",
            "end_time": "2021-02-16T23:55",
            "work_base": "Home",
            "gmt_modified": "2021-02-10T13:29:52"
        },
        {
            "foreign_teacher_id": 1357176579309965300,
            "batch_id": 1359373999368310800,
            "foreign_teacher_name": "Xanthe Dunning",
            "weekly_expected_hours": 8,
            "record_id": 1359373999372505000,
            "start_time": "2021-02-17T19:00",
            "end_time": "2021-02-17T23:55",
            "work_base": "Home",
            "gmt_modified": "2021-02-10T13:29:52"
        }
        ]

Answer 1

问题出在教师函数中，您不能将 div 放入 tbody 标签中

而不是这个

const teacher = this.props.teachers.map((teacher)=>{
            return(
                <tbody>
                    <div key={teacher.foreign_teacher_id}> // <--- bad pattern
                        <tr>
                            <td>{teacher.foreign_teacher_name}</td>
                            <td>{teacher.weekly_expected_hours}</td>
                            <td>{teacher.start_time}</td>
                            <td>{teacher.end_time}</td>
                            <td>{teacher.work_base}</td>
                            <td>{teacher.gmt_modified}</td>
                        </tr>
                    </div>
                </tbody>
            )
        })

使用这个

const teacher = this.props.teachers.map((teacher)=>{
            return(
                <tbody>
                        <tr key={teacher.foreign_teacher_id}>
                            <td>{teacher.foreign_teacher_name}</td>
                            <td>{teacher.weekly_expected_hours}</td>
                            <td>{teacher.start_time}</td>
                            <td>{teacher.end_time}</td>
                            <td>{teacher.work_base}</td>
                            <td>{teacher.gmt_modified}</td>
                        </tr>
                </tbody>
            )
        })

Reactstrap table header 和 table body 不匹配

Reactstrap table header and table body not match

javascript

datatable

json

reactjs