在不改变状态的情况下反应过滤器方法

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

这是一个反模式。 React 处理状态变化，你的对象不会发生变化。这就是 setState 的用途。我猜你不想更新你的状态以避免重新渲染你的组件。您可以创建一个 class 变量并根据需要更新它，而不会触发重新渲染。像这样：

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)
  }
}

Answer 2

你的功能差不多对了，思路也对。在您的情况下，您不需要使用带有增变函数的 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)})
}

在不改变状态的情况下反应过滤器方法

React filter method without mutating state

javascript

setstate

ecmascript-6

reactjs