Javascript 删除功能无法正常工作

我创建了删除功能，当用户单击删除[X]时，它必须从react中使用的受尊重的行w.r.t datagrid视图中删除

将id作为参数传递 已使用的查找索引（loadlash）

问题:

1） 未删除选定的行

代码：

onclick事件

      <div>
        <button onClick={() => this.deleteHandler(params.value)}>X</button>
      </div>

---

有谁能帮我解决这个问题。

这是一个很好的例子，如果不同的是，您将数据从父级传递到子级，您可以做多种事情

父组件

class TestComp extends React.Component {
constructor() {
    super();
    this.state = { listItems: [{ id: 1, text: "abc" }, { id: 2, text: "bcd" }, { id: 3, text: "dec" }] }
    this.handleRowClick = this.handleRowClick.bind(this);
}
handleRowClick(id) {

    const listItems = this.state.listItems;
    let copyListItems = [];
    listItems.forEach(function (item) {
        let objCopy = Object.assign({}, item);
        copyListItems.push(objCopy);
    });
    let updatedArray = _.remove(copyListItems, function (item) { return item.id == id; });

    this.setState({ listItems: copyListItems });
}
render() {

    return (
        <div>
            <ChildComp
                list={this.state.listItems}
                deleteHandler={this.handleRowClick}
            />
        </div>
    )
}
}

类TestComp扩展了React.Component{ 构造函数（）{ 超级（）； this.state={listItems:[{id:1，text:“abc”}，{id:2，text:“bcd”}，{id:3，text:“dec”}]} this.handleRowClick=this.handleRowClick.bind（this）； } HandlerRowClick（id）{ const listItems=this.state.listItems； 让copyListItems=[]； listItems.forEach（函数（项）{ 让objCopy=Object.assign（{}，item）； copyListItems.push（objCopy）； }); 让UpdateArray=389;.remove（copyListItems，函数（item）{return item.id==id；}）； this.setState（{listItems:copyListItems}）； } render（）{ 返回( ) } } 作为道具接收列表项的子组件，单击时调用父处理程序，该处理程序将更新列表项，并设置父处理程序的状态，该状态将更新提供给子组件的列表，因此将呈现该列表

export class ChildComp extends React.Component {

render() {
    let list = this.props.list.map((obj) =>
        <div key={obj.id} id={obj.id} style={{ padding: "10px", backgroundColor: "grey", border: "1px solid black" }} onClick={() => { this.props.deleteHandler(obj.id) }}> {obj.text} </div>
    );
    return (
        <div >
           {list}
        </div>
    )
}
}

导出类ChildComp扩展React.Component{
render（）{
让list=this.props.list.map（（obj）=>
{this.props.deleteHandler（obj.id）}>{obj.text}
);
返回(
{list}
)
}
}

您遇到了什么问题？如果我单击delete[x]，它不会被删除，如果我单击index=0，则几乎没有空行。。。。单击空行后，如果再次单击数据，则索引显示为-1。请查看@t的可能重复项。原因是我更改了代码，但仍不起作用。否我没有使用此。state.rows……rows={this.props.rowData}这些是唯一的属性。您正在将此.setState中更新的行设置为rows。。现在，this.state.rows包含更新的行。如果您需要渲染它们，视图才能更改，否则，渲染方法将继续显示原始行的输出。此外，u不应改变状态或属性如果我们在dataGrid中设置“this.state.rows”，它会抛出错误（TypeError:无法读取null的属性“rowData”）；因为你收到了父母的道具。您需要在组件的状态中设置它们，因为您将要更改它们。当然，现在我将给您一个简单的ryt示例

export class ChildComp extends React.Component {

render() {
    let list = this.props.list.map((obj) =>
        <div key={obj.id} id={obj.id} style={{ padding: "10px", backgroundColor: "grey", border: "1px solid black" }} onClick={() => { this.props.deleteHandler(obj.id) }}> {obj.text} </div>
    );
    return (
        <div >
           {list}
        </div>
    )
}
}