배열을 필터링하고 클릭 할 때마다 상태를 업데이트하는 방법

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

}