Question

我列出了包含名称，价格等属性的产品清单。然后我创建了一个简单的搜索框，我正在根据产品名称搜索我的产品。搜索结果返回正确的对象，但UI没有得到更新的结果。最初，我能够看到列表，但搜索后它没有得到更新。我是新手，需要一些帮助。这是我的代码

＆＃13;

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

＆＃13;

}`

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

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

React - 无法更新产品组件列表

1 个答案: