Question

此应用程序显示一个阵列中的三个用户。现在，我试图通过其点击按钮删除每个用户。

为此，我引用了在stackoverflow上找到的解决方案 Stackoverflow link

这是我的问题：

当我单击用户1删除它时，它将删除用户2而不是用户1，如果仅剩下用户1。如果我点击它的按钮，它不会被删除。

这是代码

import React, { Component, Fragment } from "react";
import { render } from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", name: "user 1" },
        { id: "2", name: "user 2"},
        { id: "3", name: "user 3"}
      ]
    });

 this.handleDeleteRow = this.handleDeleteRow.bind(this);
  }



handleDeleteRow = (pid) => {
alert(pid);
    let data = [...this.state.data];
    data.splice(pid, 1);
    this.setState({ 
      data: data
    })
  }




  render() {


    return (
      <span>
        <label>
          <ul>
            {this.state.data.map(person => (
              <li key={person.id}>
                {person.name}
                <br />

<button onClick={() => this.handleDeleteRow(person.id)} style={{color:'red'}}>Delete</button>
              </li>
            ))}
          </ul>
        </label>
      </span>
    );
  }
}

Answer 1

您将pid用作索引（在data.splice(pid, 1)中），但这实际上是一个ID。因此，例如，当您单击以删除第一项时，您正在调用this.handleDeleteRow("1")，但是1是数组的第二个索引，因此它是被删除的第二项。

尝试一下：

data.splice(data.findIndex(({ id }) => id === pid), 1);

如何使用Reactjs正确删除单击按钮的用户

1 个答案: