Reagieren - Die Liste der Produktkomponenten kann nicht aktualisiert werden

Question

Ich habe eine Produktliste erstellt, die Name, Preis usw. enthält. Dann habe ich ein einfaches Suchfeld erstellt und suche meine Produkte anhand des Produktnamens. Das Suchergebnis gibt das korrekte Objekt zurück, aber die Benutzeroberfläche wird nicht mit diesem Ergebnis aktualisiert.In erster Linie kann ich die Liste sehen, aber nach der Suche wird sie nicht aktualisiert. Ich bin neu zu reagieren, da brauche ich Hilfe. hier ist mein Code

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 wahrscheinlich this.state.products.filter

Bei Bezugnahme auf eine Komponenten-Methode sagen Sie this.onInputChange sein sollte, aber wenn Zustand Referenzierung müssen Sie sagen this.state.products weil this.products doesn‘ t existieren.

Ich würde auch diese bewegen:

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

}); 

zu Ihrer Aussage machen. so Ihre onchange-Handler könnte sein:

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

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

und dann Sie

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

Hoffnung, das hilft! Wenn das Problem weiterhin besteht, teilen Sie Ihren gesamten Code mit, damit ich das Problem besser verstehen kann.