反应 - 无法更新产品组件列表

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

}`

Answer 1

this.products.filter可能应该this.state.products.filter

当引用组件方法时，你说this.onInputChange但在引用状态时，你必须说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>
    })} 
    )
}

希望对您有所帮助！如果您的问题仍然存在，请分享您的整个代码，以便我更好地了解问题。