React UserList组件表格重复显示问题排查与修复求助

问题原因 #

你的UserList组件中，useEffect的依赖数组设置为[users]，这会触发无限循环更新：

1. 组件挂载时，useEffect执行，调用UserService.findAll()获取用户列表，通过setUsers更新users状态；
2. users状态更新后触发组件重渲染，由于users在依赖数组中，useEffect会再次执行；
3. 再次调用接口获取数据并更新users，循环往复。
   这种无限循环会导致组件反复渲染，最终出现表格行重复显示的问题。

修复步骤 #

将useEffect的依赖数组改为空数组[]，让它仅在组件首次挂载时执行一次，彻底终止无限循环：

import React,{useState,useEffect} from 'react'
import { Link } from 'react-router-dom'
import UserService from '../services/UserService'

const UserList = () => {

    const [users,setUsers] = useState([])
    
    useEffect(() => {
        UserService.findAll().then((response)=>{
            setUsers(response.data)
        }).catch(error=>{
            console.log(error)
        })
    },[]) // 修改此处为空白依赖数组
   
   const [selectedUserId, setSelectedUserId] = useState(null); // 建议添加初始值null，避免undefined状态问题
  
   const handleRowClick = (id) => {
    setSelectedUserId(id);
  }
  
  return (
    <div className='container'>
        <h2 className='text-center'>Users</h2>
        <div>
            <table className='table table-bordered table-stripped'>
                <thead>        
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Password</th>   
                </thead>
                <tbody>
                    {
                        users.map(
                            user => 
                                
                            <tr key={user.id} onClick={() => handleRowClick(user.id)} style={{backgroundColor: selectedUserId === user.id ? "lightblue" : ""}}>  
                                <td>{user.firstName}</td>
                                <td>{user.lastName}</td>
                                <td>{user.email}</td>
                                <td>{user.password}</td>
                            </tr>
                        )
                    }
                </tbody>
            </table>
        </div>
        <Link className="btn btn-primary mx-2" to="/users/save"  state='Create' >New</Link>
        <Link className="btn btn-primary mx-2" to={`/update/${selectedUserId}`}  state='Update'> Edit</Link>
        <Link className="btn btn-primary mx-2" to={`/update/${selectedUserId}`}   state='Delete' >Delete</Link>
    </div>
  )
}
export default UserList;

额外优化建议：

• 用模板字符串替换字符串拼接（如to={/update/${selectedUserId}}），代码更简洁易读；
• 可添加加载状态，在接口请求未完成时显示加载提示，提升用户体验。

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