javascript - 我是否正确更新了 React 状态？

Question

在我的 React 状态下，我有以下状态:

this.state = {
  users: [{
    id: 1,
    name: "john",
    age: 27
  }, {
    id: 2,
    name: "ed",
    age: 18
  }, {
    id: 3,
    name: "mel",
    age: 20
  }]
}

我正在正确呈现 name。当您单击名称时，它应该删除该名称，这将需要一个 onClick 接受一个函数并返回一个 removeUser 函数。

据我了解，您不想改变 React 中的状态，而是返回一个新状态。所以，在我的 removeUser 函数中，我做了:

removeUser(index) {
  // Making a new copy of the array
  const users = [...this.state.people].splice(index, 1);
  this.setState({ users });
}

我用this.removeUser = this.removeUser.bind(this)bind我的方法。

当我测试我的代码时，我按预期删除了用户。但是，当我针对我 friend 编写的测试运行我的代码时，我得到了一个失败的测试:Expected 1 to be 0

该消息告诉我，我必须以某种方式改变状态，但我不确定如何改变。我是否返回一个新数组并正确更新状态？有人可以向我解释在这种情况下我应该如何正确更新我的状态吗？

完整代码如下:

class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        {id: 1, name: "john", age: 27}, 
        {id: 2, name: "ed", age: 18}, 
        {id: 3, name: "mel", age: 20}
      ]
    }

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

  removeUser(index) {
    const users = [...this.state.users].splice(index, 1);
    this.setState({ users });
  }

  render() {
    const list = this.state.users.map((user, i) => {
      return (
        <div onClick={() => this.removeUser(i)} key={i}>{user.name}</div>
      );
    });

    return (
      <div>
        {list}
      </div>
    );
  }
}

Answer 1

您还可以更改您的 onClick 并将其传递给 user.id 而不是索引。这将允许您过滤结果而不需要拼接数组。

onClick={() => this.removeUser(user.id)}

removeUser(id) {
  const users = this.state.users.filter((user) => user.id !== id);
  this.setState({ users });
}