javascript - 使用 React 从表中删除一行的问题

Question

我试图弄清楚如何使用一个简单的按钮从一个简单的表格中删除一行。
我尝试使用索引，但是根据我写的内容，当我单击要删除的行时，只有所有其他人都被删除了...
我想问题出在我使用索引的方式上，但我很难理解这种行为。

 let users = [
        { firstName: "John", lastName: "Connor", age: 20 },
        { firstName: "Geralt", lastName: "Rivia", age: 45 },
        { firstName: "Nathan", lastName: "Drake", age: 36 }
    ]
    
    
    class exercice extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                users: users
            }
        }
        
        onClickDeleteRow = index => {
            users = users.splice(index,1)
            this.setState({users: users})
            console.log(this.state.users)
        }
        
    
        render() {
            let usersName = this.state.users.map((user, index) => (
                <tr key={index}>
                    <td>{user.firstName} </td>
                    <td>{user.lastName} </td>
                    <td><button onClick={() => this.onClickDeleteRow(index)}>Delete</button></td>
                </tr>
            ))
    
            return (
                <table>
                    <thead>
                        <tr>
                            <th> firstName </th>
                            <th> lastName</th>
                        </tr>
                    </thead>
                    <tbody>
                        {usersName}
                    </tbody>
                </table>
            )
        }
    }
    
    ReactDOM.render(
        <div className="firstContainer">
            <Exercice />
        </div>,
        document.getElementById('root')
    
    )

Answer 1

.splice()方法返回一个包含从原始数组中删除的元素的数组，其中 .splice()方法被调用。所以如果 index是 1，那么

users = users.splice(index,1)

将更新 users并将一个包含一个元素的数组分配给 users持续的。如 index是 1 然后在上述语句之后， users将会

users = [{ firstName: "Geralt", lastName: "Rivia", age: 45 }]

这是在状态中设置的内容。这就是为什么除了要删除的行之外的所有其他行都被删除的原因。
解决方案
您可以通过以下几种方式解决问题:

改变

users = users.splice(index, 1);

到

users.splice(index, 1);

这将确保您不会更新 users返回值为 .splice()方法。

第一种方法的问题是它修改了原来的 users大批。您可以避免修改 users使用 .filter() 数组方法。
更改 onClickDeleteRow方法如下图:

onClickDeleteRow = (index) => {
   const updatedUsers = this.state.users.filter((user, idx) => idx !== index);
   this.setState({ users: updatedUsers });
};