배열 객체 필터링 및 새로 고침 방법

Question

버튼을 클릭하면 배열 객체를 필터링하고 새로 고침합니다. 여기 내 코드는 다음과 같습니다 handleClick 조치가 발사 될 때

handleClick (event) { 
     event.preventDefault() 
     var el = event.target 

     if (el.name === 'diploma') { 
      this.setState({activeIndex: true}) 
      this.state.results.filter((el) => 
       el.title.toLowerCase().indexOf('diploma') > -1 
      ); 
     } else { 
      this.setState({activeIndex: false}) 
      this.state.results.filter((el) => 
       el.title.toLowerCase().indexOf('management') > -1 
      ); 
     } 
    } 

    fetchAPI(url) { 
     return fetch(url) 
      .then((response) => { 
       if (response.status >= 400) { 
        throw new Error('Bad response from server'); 
       } 
       return response.json(); 
      }); 
    } 

    componentDidMount() { 
     const that = this; 
     const url = 'https://d1zh5hbzybtmpd.cloudfront.net/api/app/category/' + that.props.categoryId; 


     that.fetchAPI(url).then((data) => { 
      that.setState({ 
       result: data.category, 
       results: data.courses.courses 
      }); 
     }); 
    } 

render({ }, { result={}, results=['', '', '', '', '', '', '', '', '', ''] }) { 
     return (

목록 새로 고침되지 않습니다. 그 문제를 해결하는 방법을 알려주십시오. 감사. 을 적용하려면 results의 상태를 설정해야

handleClick (event) { 
    event.preventDefault() 
    var el = event.target 

    if (el.name === 'diploma') { 
     this.setState({ 
      activeIndex: true, 
      results: this.state.results.filter(el => el.title.toLowerCase().indexOf('diploma') > -1) 
     }); 
    } else { 
     this.setState({ 
      activeIndex: false, 
      results: this.state.results.filter((el) => el.title.toLowerCase().indexOf('management') > -1); 
     }) 

    } 
} 

Answer 1

:

Answer 2

나는 당신이 어떤 개체를 필터링하려는 단지와 setState ({newResults 결과를}) 가정합니다. 그러나 코드가 작동하는 경우도 있지만 일관성이 없으며 콜백에서 상태 변수를 변경하는 것이 좋지 않습니다.

handleClick (event) { 
    event.preventDefault() 
    var el = event.target 

    if (el.name === 'diploma') { 
     const newResults = this.state.results.filter((el) => 
      el.title.toLowerCase().indexOf('diploma') > -1 
     ); 
     this.setState({activeIndex: true, results: newResults}); 
    } else { 
     const newResults = this.state.results.filter((el) => 
      el.title.toLowerCase().indexOf('management') > -1 
     ); 
     this.setState({activeIndex: false, results: newResults}); 
    } 
}