React - 제품 구성 요소 목록을 업데이트 할 수 없습니다.

Question

이름, 가격 등이 포함 된 제품 목록을 만들었습니다. 그런 다음 간단한 검색 상자를 만들고 제품 이름을 기반으로 제품을 검색하고 있습니다. 검색 결과가 올바른 개체를 반환하지만 UI가 해당 결과로 업데이트되지 않습니다. 처음에는 목록을 볼 수 있지만 검색 한 후에는 업데이트되지 않습니다. 나는 새로운 반응을하므로 도움이 필요하다. 여기 내 코드는

OnInputChange(term) 
 
    { 
 
    let result= this.products.filter(product=>{ 
 
      return product.name==term; 
 

 
    }); 
 
    console.log(result); 
 

 

 
    let list=result.map((product)=> 
 
    { 
 
     return <li key={product.price}>{product.name}</li> 
 

 
    }); 
 
    console.log(list); 
 
    this.setState({listOfProducts:list}); 
 
    } 
 

 
    render() 
 
    { 
 

 
     this.state.listOfProducts=this.products.map((product)=> 
 
     { 
 
      return <li key={product.price}>{product.name}</li> 
 

 
     }); 
 
     return <div> 
 
      
 
      <input onChange={event=>{this.OnInputChange(event.target.value)}}/> 
 
      <ul>{this.state.listOfProducts}</ul> 
 
      
 
      </div> 
 

 
    }

당신이 this.onInputChange 말하는 구성 요소 방법을 언급 할 때 그러나 당신이 말을해야 상태를 참조 할 때

이

}` 

Answer 1

this.products.filter 아마 this.state.products.filter

을해야입니다 this.state.products '아무튼 this.products 때문에 존재하지 않습니다.

나는이 이동할 것 :

let list=result.map((product)=> 
{ 
    return <li key={product.price}>{product.name}</li> 

}); 

당신의 렌더링 문. 그래서 당신의 onchange를 핸들러 수 :

OnInputChange(term) 
    { 
    let result= this.products.filter(product=>{ 
      return product.name==term; 

    }); 
    this.setState({listOfProducts:result}); 
    } 

하고 있습니다 다음

render(){ 
    return(
    {this.state.listOfProducts.map(product => { 
     return <li key={product.price}>{product.name}</li> 
    })} 
    ) 
} 

희망을! 문제가 지속되면 문제를 더 잘 이해할 수 있도록 전체 코드를 공유하십시오.