React - 製品コンポーネントのリストを更新できません

Question

名前、価格などのプロパティを含む製品のリストを作成しました。次に、簡単な検索ボックスを作成し、商品名に基づいて商品を検索しています。検索結果が正しいオブジェクトを返しますが、UIはその結果で更新されていません。最初はリストを見ることができましたが、検索後には更新されません。私は反応するために新しいですので、いくつかの助けが必要です。ここthis.products「のdoesnのため、あなたがthis.onInputChangeを言うが、状態を参照するときにthis.state.productsを言わなければならないコンポーネントのメソッドを参照するときに私のコード

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> 
 

 
    }

}` 

Answer 1

this.products.filterはおそらくthis.state.products.filter

あるべきです存在しない。

私はまた、この移動する：あなたのレンダリングステートメントに

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

希望を！問題が解決しない場合は、コード全体を共有して問題をよく理解してください。