从API获取数据创建React表格时出现行重复问题求助

你的问题出在User组件的结构设计上：当前每个User组件都包含了完整的<table>、<thead>和<tbody>，当你循环渲染多个User组件时，相当于在页面上生成了多个独立的表格，每个表格里只有一行数据，视觉上就会呈现出表头重复、行看起来“重复”的效果（截图里也能看到多次出现的Name/Email表头）。

修正方案 #

把表格的整体结构（<table>和<thead>）抽出来放到父组件里，让User组件只负责渲染单一行<tr>：

修改后的User组件

import React from 'react'
import './user.css'

const User = ({ id, email, name, onDelete }) => {
    const handleDelete = () => {
        onDelete(id);
    }

    return (
        <tr>
            <td>{name}</td>
            <td>{email}</td>
            <td>
                <button>edit</button>
                <button onClick={handleDelete}>delete</button>
            </td>
        </tr>
    )
}

export default User

新增父组件（比如UserList）负责渲染完整表格

import React, { useState, useEffect } from 'react'
import User from './User'

const UserList = () => {
    const [users, setUsers] = useState([])

    // 模拟API获取数据
    useEffect(() => {
        fetch('你的API地址')
            .then(res => res.json())
            .then(data => setUsers(data))
    }, [])

    const handleDelete = (userId) => {
        setUsers(users.filter(user => user.id !== userId))
    }

    return (
        <table className='table'>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>edit</th>
                    <th>delete</th>
                </tr>
            </thead>
            <tbody>
                {/* 遍历用户数据，渲染User组件作为表格行，注意加唯一key */}
                {users.map(user => (
                    <User
                        key={user.id} // 必须加唯一key，避免React渲染异常
                        id={user.id}
                        name={user.name}
                        email={user.email}
                        onDelete={handleDelete}
                    />
                ))}
            </tbody>
        </table>
    )
}

export default UserList

关键注意点 #

• 循环渲染组件时，一定要给每个子元素加上唯一的key属性（用用户id这类唯一值），这是React的要求，能避免不必要的重渲染和错误。
• 表格的结构要统一：一个<table>对应一个<thead>和一个<tbody>，tbody里放所有数据行。

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