배열의 변경 상태 변경 (for 루프)

Question

나는 항공편이있는 주를 보유하고 있으며 최대 가격을 변경하여 비행 요소의 가시성을 변경합니다.

maxpriceFilter() { 

    var flightOffer = this.state.flightOffer; 
    var sliderPrice = this.state.sliderPrice; 

    for (var i = 0; i < flightOffer.length; i++) { 
     if(flightOffer[i].price > sliderPrice) { 

      this.setState(
       {[flightOffer[i].hiddenprice] : true} 
      ); 
     }; 
    } 

이 코드는 내가 여기에 대한 가장 좋은 방법을 찾을 수 없습니다 ..하지만 국가의 루트에 진정한 상태로 정의되지 않은 필드를 추가, 다른 한 후 계산 된 필드를 사용하고 있습니다. 하지만 난 계산 된 필드를 얻을 수 없어 ..

누군가 나를 도울 수 있을까요?

Answer 1

루프에서 setState 호출을 수행하지 않으려는 경우 반응 컴포넌트가 여러 번 렌더링됩니다. 새 상태 객체를 만들고 setState를 한 번 호출하십시오. 또한 if 문하여 필터링 만에 이전 값을 설정하지 않으 숨겨진 :

maxpriceFilter() { 

    var flightOffer = this.state.flightOffer; 
    var sliderPrice = this.state.sliderPrice; 
    var newState = {}; 

    for (var i = 0; i < flightOffer.length; i++) { 
     newState[flightOffer[i].hiddenprice] = flightOffer[i].price > sliderPrice; 
    } 

    this.setState(newState); 

    // ... 
} 

문제가 계속 발생하는 경우, hiddenprice 속성이 예상하지 무엇 일 수 있었다 ? render() 함수도 게시해야 할 수도 있습니다.

Answer 2

상태를 업데이트 할 때 루핑을하는 대신 렌더링시 스위치를 사용하지 않는 것이 어떻습니까?

flightOffers의 모든 내용이 이미 render()에 반복되어 있습니다. 그냥 거기에 수표를 추가하십시오. 렌더링 내에서 hiddenPrice={offer.price > sliderPrice}을 지주로 사용하거나 가시성을 제어하는 ​​곳에서 직접 사용하십시오.

왜? 이 경우 특정 항목의 표시 여부는 상태가 아니기 때문에 그것은 국가의 결과입니다.