无突变状态的反应滤波法

Question

我目前的状况是：

state = { items : [{id: 1, text: 'test words'}, {id: 2, text: 'another test'}]

下面是我的函数，用于从数组中移除对象，以避免发生变异状态。

handleRemove(passedInId) {

  const myItems = this.state.items

  const newArray = myItems.filter(item => item.id !== passedInId)

  this.setState(prevState => ({
    items: prevState.items = newArray
  }))

  console.log('handle remove runned', passedInId, myItems, newArray)

}

它工作得很完美，但想知道它是否是反模式，然后再继续我的生活。

非常感谢！！

Answer 1

你的功能几乎是正确的，而且你有正确的想法。在您的情况下，您不需要使用接受mutator函数的setState版本，而只需这样做：

handleRemove(passedInId) {

  const myItems = this.state.items

  const newArray = myItems.filter(item => item.id !== passedInId)

  this.setState({
    items: newArray
  })

  console.log('handle remove runned', passedInId, myItems, newArray)

}

老实说，这很简单，一条线就行了：

handleRemove(passedInId) {
  this.setState({items: this.state.items.filter(item => item.id !== passedInId)})
}

Answer 2

这是反模式。响应句柄状态更改，您的对象就不会发生变异。这就是setState的目的。我猜您不想更新您的状态以避免重新呈现您的组件。您可以创建类变量并按需要更新它，而无需触发重呈现。就像这样：

class MyComponent extends React.Component {
  constructor(props) {
    this.state = {};
    this.items = [{id: 1, text: 'test words'}, {id: 2, text: 'another test'}];
  }

  handleRemove(passedInId) {
    this.items = this.items.filter(item => item.id !== passedInId)
  }
}