Question

我的React.js应用程序中的splice（）方法存在一些问题。

所以， this is an example app 。删除现在不起作用。这有什么不对？部分代码：

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以确保我区分我的prop变量和我的状态变量。

Splice（）方法不起作用

2 个答案: