ReactJS中删除用户后浏览器无法更新列表问题求助

问题根源 #

你当前的代码存在状态不共享的问题：用户数据的状态被放在了Editbutton子组件里，但渲染用户列表的Dashboard1父组件始终直接使用原始的data.json数据。点击删除后，Editbutton内部的users状态确实更新了，但父组件完全感知不到这个变化，页面自然不会重新渲染更新后的列表。

修复步骤 #

1. 把状态和删除逻辑移到父组件Dashboard1

将用户数据的状态提升到父组件，同时定义删除函数，再把当前用户列表和删除函数传递给子组件：

import React, { useState } from 'react';
import data from '../Common/data.json';
import { Editbutton } from '../NormalDeelte/Editbutton'

const Dashboard1 = () => {
    // 父组件维护用户数据状态
    const [users, setUsers] = useState(data);

    // 定义删除逻辑
    const deleteUser = (id) => {
        const newUsers = users.filter(user => user.id !== id);
        setUsers(newUsers);
    };

    return (
        <>
            <div>
                <ul>
                    {/* 用父组件的users状态渲染列表，同时添加唯一key */}
                    {users.map((user) => (
                        <div key={user.id}>
                            <li>{user.firstName}</li>
                            <li>{user.lastName}</li>
                            {/* 把删除函数和id传给子组件 */}
                            <Editbutton id={user.id} onDelete={deleteUser} />
                        </div>
                    ))}
                </ul>
            </div>
        </>
    )
}

export default Dashboard1

2. 简化Editbutton子组件

子组件不再需要维护内部状态，只需要接收父组件传递的删除回调，点击按钮时触发即可：

import React from 'react'

export const Editbutton = (props) => {
    return (
        <div>
            <button onClick={() => props.onDelete(props.id)}>Delete</button>
        </div>
    )
}

额外说明 #

• 列表渲染时必须给每个元素添加唯一的key（这里用user.id），帮助React高效识别DOM元素的变化。
• 状态提升是React中实现组件间状态共享的核心方式，当多个组件需要依赖同一状态或状态变化需要影响多个组件时，就把状态提到它们的共同父组件中。

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