Javascript 正在从表中删除元素-react

我试图在react中创建一个CRUD应用程序，但遇到了几个问题。 如何从表中删除项目？ 可以在渲染方法中将id传递给Info组件吗？以后如何将其链接到元素？ 为什么在尝试删除时，e.PreventDefault（）方法会导致错误

import React, { Component } from 'react';

const Info = ({ index, login, pass }) => (
    <>
        <thead>
            <tr>
                <th>ID</th>
                <th>LOGIN</th>
                <th>PASSWORD</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td key={index}>{index}{alert(index)}</td>
                <td>{login}</td>
                <td>{pass}</td>
            </tr>
        </tbody>
        <input type="submit" value='X' onClick={() => this.del(index)}></input>
    </>
);

class List extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            login: "",
            pass: "",
        };

        this.add = this.add.bind(this);
        this.show = this.show.bind(this);
        this.del = this.show.bind(this);
    }



    add(e) {
        e.preventDefault();
        this.setState({
            [e.target.name]: e.target.value,
        });
    }

    show(e) {
        e.preventDefault();

        if (!this.state.login.length || !this.state.pass.length) {
            return;
        }

        else {
            const newUser = {
                login: this.state.login,
                pass: this.state.pass,
            };

            this.setState(state => ({
                data: state.data.concat(newUser),
            }))
        }
    }

    del(index) {

        const tab = this.state.data.filter((temp) => temp.index !== index);
        this.setState(({
            data: tab
        }));

    }
    render() {



        return (
            <div>
                <form onSubmit={this.show}>
                    <label>Login</label><br></br><input type='text' name='login' onChange={e => this.add(e)}></input><br></br>
                    <label>Password</label><br></br><input type='text' name='pass' onChange={e => this.add(e)}></input><br></br>
                    <input type="submit" value="Add"></input>
                </form>
                <table>

                    {this.state.data.map((val, index) => (
                        <>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>LOGIN</th>
                                    <th>PASSWORD</th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td key={index}>{index}</td>
                                    <td>{val.login}</td>
                                    <td>{val.pass}</td>
                                </tr>
                            </tbody>
                            <input type="submit" value='X' onClick={() => this.del(index)}></input>
                        </>
                    ))}
                </table>
            </div>
        )
    }
}


export default List;

import React，{Component}来自'React'；
常量信息=（{index，login，pass}）=>(
身份证件
登录
密码
{index}{alert（index）}
{login}
{pass}
this.del（index）}>
);
类列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
登录名：“，
通行证：“，
};
this.add=this.add.bind（this）；
this.show=this.show.bind（this）；
this.del=this.show.bind（this）；
}
加（e）{
e、 预防默认值（）；
这是我的国家({
[e.target.name]：e.target.value，
});
}
节目（e）{
e、 预防默认值（）；
如果（！this.state.login.length |！this.state.pass.length）{
返回；
}
否则{
常量newUser={
登录名：this.state.login，
通行证：this.state.pass，
};
this.setState（state=>({
数据：state.data.concat（newUser），
}))
}
}
del（索引）{
const tab=this.state.data.filter（（temp）=>temp.index！==index）；
这是我的国家(({
数据：选项卡
}));
}
render（）{
返回(
登录此。添加（e）}>


密码

此。添加（e）}>


{this.state.data.map（（val，index）=>(
身份证件
登录
密码
{index}
{val.login}
{val.pass}
this.del（index）}>
))}
)
}
}
导出默认列表；

您的代码中有一些小的更正

this.del=this.show.bind（this）

应该是

this.del=this.del.bind（this）

您正试图使用index（

this.state.data.filter（（temp）=>temp.index！==index）；

）从状态数据中删除元素，但数据中的元素没有index属性

在这种情况下，可以使用

splice

从数据中删除元素

类列表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
登录名：“，
通行证：“，
};
this.add=this.add.bind（this）；
this.show=this.show.bind（this）；
this.del=this.del.bind（this）；
}
加（e）{
e、 预防默认值（）；
这是我的国家({
[e.target.name]：e.target.value，
});
}
节目（e）{
e、 预防默认值（）；
如果（！this.state.login.length | |！this.state.pass.length）{
返回；
}
否则{
常量newUser={
登录名：this.state.login，
通行证：this.state.pass，
};
this.setState（state=>({
数据：state.data.concat（newUser），
}))
}
}
del（索引）{
设{data}=this.state
数据拼接（索引1）；
这是我的国家(({
数据
}));
}
render（）{
返回(
登录此。添加（e）}>


密码

此。添加（e）}>


{this.state.data.map（（val，index）=>(
身份证件
登录
密码
{index}
{val.login}
{val.pass}
this.del（index）}>
))}
)
}
}
ReactDOM.render（，document.querySelector（#app））