React中每次点击时如何过滤数组和更新状态答案

【问题标题】：How to filter array & update state when every click in ReactReact中每次点击时如何过滤数组和更新状态
【发布时间】：2017-03-20 10:28:41
【问题描述】：

我只是想知道如何在 React 中更新状态。我正在开发基本的“待办事项应用程序”。我为每个元素创建了一个列表和映射。用户可以在列表中添加新元素，并且可以更改元素的状态。

现在，我希望每次点击都会更新状态。例如，当用户单击完成按钮时，状态称为列表将只包含已完成的项目。我能做到。但是更新列表后，我无法访问默认列表。例如，当用户点击按钮时；

changeView(event) {
let clickStatus = event.target.value
if (clickStatus = 'completed') {
const newList = this.state.list.filter((item) => {
return item.completed
})
this.setState({
this.state.list: newList
})
}

但在此之后，我无法访问包含每个项目的列表。

这是我的代码：

class App extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          'text': 'First Item',
          'completed': false
        },
        {
          'text': 'Second Item',
          'completed': false
        },
        {
          'text': 'Third Item',
          'completed': true
        }
      ]
    }
    this.handleStatus = this.handleStatus.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit(event) {
    event.preventDefault()
    const newItem = {
      'text': this.refs.new.value,
      'completed': false
    }
    this.setState({
      list: this.state.list.concat([newItem])
    })
    this.refs.new.value = ''
  }

  handleStatus(event) {
    const itemText = this.state.list[event.target.value].text
    const itemStatus = this.state.list[event.target.value].completed
    const newItem = {
      'text': itemText,
      'completed': itemStatus ? false : true
    }
    const list = this.state.list
    list[event.target.value] = newItem
    this.setState({
      list
    })
  }

  render() {

    const Item = this.state.list.map((item, index) => {
      return <li onClick={this.handleStatus} className={(item.completed) ? 'done' : 'default'} value={index} status={item.completed}>{item.text}</li>
    })

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type='text' ref='new'></input>
          <button type='submit'>Add</button>
        </form>
        <ul>
          {Item}
        </ul>
        <div>
          <button
            value='all'
            type='submit'>All
          </button>
          <button
            value='completed'
            type='submit'>Completed
          </button>
          <button
            value='pending'
            type='submit'>Pending
          </button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

【问题讨论】：

标签： arrays reactjs filter state

【解决方案1】：

不是在每次过滤器更改时更新状态中的项目列表，而是使用状态属性来决定在渲染期间应该显示哪些项目。
State 应该始终存储整个列表，并且您应该只设置 state 属性以指示 completed 过滤器处于活动状态：

changeView(event) {
    let clickStatus = event.target.value
    this.setState({
        completedFilter: clickStatus === 'completed' ? true : false
    })
}

然后使用该属性过滤render方法中显示的项目：

render() {
    let fileredItems = this.state.list;
    if (this.state.completedFilter) {
        fileredItems = this.state.list.filter((item) => item.completed);
    }
    return (
        ...
        {
            filteredItems.map((item) => {
                //return item node
            })
        }
    );

}

【讨论】：