如何在 React 中每次单击时过滤数组和更新状态

Question

我只是想知道在 React 中更新状态。我正在研究基础 "to-do app"。我为每个元素创建了一个列表和映射。用户可以在列表中添加新元素并可以更改元素的状态。

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

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

Answer 1

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

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

然后使用此属性过滤渲染方法中显示的项目：

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

}

如何在 React 中每次单击时过滤数组和更新状态

How to filter array & update state when every click in React

arrays

state

filter

reactjs