Splice()方法无效

Question

在我的React.js应用程序中，我对splice()方法有一些问题。

那么，这是一个示例应用程序.删除现在不起作用。这里怎么了？守则的一部分：

class CardList extends React.Component {
  static propTypes = {
    students: React.PropTypes.array.isRequired
  };
  // ADD DELETE FUNCTION
  deletePerson(person) {
    this.props.students.splice(this.props.students.indexOf(person), 1)
    this.setState()
  }
  render() {
    let that = this
    return <div id='list'>
      {this.props.students.map((person) => {
        return <Card
          onClick={that.deletePerson.bind(null, person)}
          name={person.name}>
        </Card>
      })}
    </div>
  }
}

class Card extends React.Component {
  render() {
    return <div className='card'>
       <p>{this.props.name}</p>
      {/* ADD DELETE BUTTON */}
      <button onClick={this.props.onClick}>Delete</button>
    </div>
  }
}

http://codepen.io/azat-io/pen/Vaxyjv

Answer 1

你的问题是当你打电话

onClick={that.deletePerson.bind(null, person)} 

将this值绑定到null。因此，在deletePerson函数的内部，this是null而不是实际的组件。你应该把它改成

onClick={that.deletePerson.bind(this, person)}

一切都会像预期的那样运转

Answer 2

将绑定值更改为this肯定会导致对this.setState()的调用正常工作，从而触发重呈现，但是我强烈建议不要采用这种方法。

道具应该是不变的。相反，使用内部状态并用新值替换，而不是对它们进行变异。为此，通过执行以下操作，在构造函数中设置组件的状态：

constructor(props) {
    super(props)
    this.state = {
        students: ...this.props.students
    }
}

现在当你需要删除一个人时：

deletePerson(person) {
    // notice the use of slice vs splice
    var newStudents = this.props.students.slice(this.props.students.indexOf(person), 1)
    this.setState({ students: newStudents })
}

最后，在呈现方法中使用this.state.students。

这背后的原因是，props是直接从父容器组件传递的，所以修改它们就没有意义了。为了更好地理解我自己的代码，我倾向于传递名为initialStudents的道具，并将我的状态设置为students: ...initialStudents，以确保我区分了我的道具变量和状态变量。