reactjs如何从表中删除数据？答案

【问题标题】：How to delete data from table in reactjs?reactjs如何从表中删除数据？
【发布时间】：2021-02-02 12:52:05
【问题描述】：

我在我的反应项目中使用“mdbootstrap”中的“MDB”数据表，所以我想在单击按钮后删除行。用户从服务器中删除，但前端仍然显示我被删除的用户的行但是在我刷新页面后，该行消失了。删除请求成功发送到服务器。这是我的代码：

class Users extends Component {
state = {
    users: [],
    tableRows: [],
}
async componentDidMount() {
    await axios.get('http://localhost:3000/admin/users', {
        headers: {
            'x-access-token': localStorage.getItem("token")
        }
    }
    )
        .then(response => response.data)

        .then(data => {

            this.setState({ users: data })

        })

        .then(() => {

            this.setState({ tableRows: this.getusers() })

        });

}

getusers = () => {
    let users = this.state.users.map((user) => {
        return (
            {
                id: user._id,
                name: user.name,
                cin: user.cin,
                delete: <MDBIcon
                    icon='trash'
                    className='red-text'
                    size='1x'
                    style={{ cursor: 'pointer' }}
                    onClick={() => this.handeldelete(user._id)}

                />,
                add: <Analys />
            }
        )
    });

    return users;
}

handeldelete = async userId => {
    await axios.delete("http://localhost:3000/admin/users/" + userId, {
        headers: {
            'x-access-token': localStorage.getItem("token")
        }
    })
};

render() {
    const data = {
        columns: [
            {
                label: 'USER ID',
                field: 'id',
                sort: 'asc',
                width: 150
            },
            {
                label: 'Name',
                field: 'name',
                sort: 'asc',
                width: 270
            },
            {
                label: 'CIN',
                field: 'cin',
                sort: 'asc',
                width: 200
            },
            {
                label: 'Delet',
                field: 'delete',
                sort: 'asc',
                width: 200
            },
            {
                label: 'ADD ANALYS',
                field: 'add',
                sort: 'asc',
                width: 200
            },
        ],
        rows: this.state.tableRows,



    };

    return (
        <div>
            <MDBDataTableV5 hover data={data} filter='name' proSelect searchTop searchBottom={false} />
            <ToastContainer />


        </div>

    );
}

}

导出默认用户；

【问题讨论】：

按delete的时候可以调用getUsers函数，同时也会删除用户，重新渲染用户
我这样做了，但还是不行！

标签： reactjs

【解决方案1】：

我相信您在删除时更新了数据库，但没有更新应该在下面的函数中处理的状态。

handeldelete = async userId => {
await axios.delete("http://localhost:3000/admin/users/" + userId, {
    headers: {
        'x-access-token': localStorage.getItem("token")
    }
});
const tableRows = this.state.tableRow;
const userIndex = tableRows.findIndex(user => user.userId === userId);
tableRows.splice(1, userIndex);
this.setState({tableRows});

};

注意：欢迎使用更短的代码

【讨论】：

感谢您的评论，但问题仍然存在！