Rendern von Daten aus einem Array von Objekten

Question

Ich habe den Suchfilter integriert und die JSON-Daten (Array von Objekten) mithilfe der auf dem Suchbegriff basierenden Post-Methode abgerufen. Der json Ausgang ist unten angegeben:

[ 
    {"taxi_code":"CT0001","class":"0"}, 
    {"taxi_code":"CT0002","class":"0"}, 
    {"taxi_code":"CT0003","class":"0"} 
] 

Aber die json Daten an die DisplayTable Komponente nicht wiedergegeben wird, auch die Kartenmethode. Was habe ich falsch gemacht?? Mit console.log(<DisplayTable data={queryResult} />), bekam ich diese Art der Ausgabe: Object { props={...}, _store={...}, $$typeof=Symbol {}, more...}

class Results extends Component 
{ 
     constructor(props){ 
       super(props); 
       this.state={searchTerm:''};  
     } 
     render(){ 
      return(<div id="results" className="search-results"> 
        {this.props.data} 
        <SearchInput className="search-input" onChange={e=>this.searchUpdated(e)} /> 
       </div>); 
     } 
     searchUpdated (e) { 
      this.setState={searchTerm: e}; 
      var queryResult; 
      axios.post(config.api.url + 'public/getAttributesbyname', {'searchTerm':e,'name':this.props.data}) 
       .then(response => { 

       var queryResult = response.data; 
       render() 
       { 

       return (<DisplayTable data={queryResult}/>); 
       } 
       }) 
       .catch(response => { 

       }); 
     } 
    } 

class DisplayTable extends Component 
{ 
    render() 
    { 
     return this.props.data.map((alldata)=> { 
      return <div className="station">{alldata.taxi_code}</div>; 
     }); 
    } 
} 

Answer 1

Sie haben mehrere Fehler im Code,

1. Sie nicht Werte aus asynchronen Funktion zurückgeben kann (axios.post)
2. this.setState ist Methode und Sie müssen es this.setState() nennen aber ihm keinen Wert zuweisen

denke ich in In diesem Fall brauchen Sie keinen Handle-Status aus dem Eingabefeld searchTerm, Sie können Wert von der Eingabe erhalten und es verwenden., aber Sie sollten den Status für Daten behandeln, die Sie vom Server erhalten.

Ich habe Ihr Beispiel Refactoring, und jetzt sieht es aus wie dieses

class Results extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { data: [] }; 
    } 

    render(){ 
    return <div id="results" className="search-results"> 
     <DisplayTable data={ this.state.data } /> 
     <SearchInput 
     className="search-input" 
     onChange={ e => this.searchUpdated(e) } 
     /> 
    </div>; 
    } 

    searchUpdated (e) { 
    axios 
     .post(config.api.url + 'public/getAttributesbyname', { 
     searchTerm: e.target.value, 
     name: this.props.data 
     }) 
     .then(response => { 
     this.setState({ data: response.data }); 
     }) 
    .catch(response => {}); 
    } 
} 

class DisplayTable extends Component { 
    render() { 
    const stations = this.props.data.map((alldata, index) => { 
     return <div className="station" key={ index }>{ alldata.taxi_code }</div>; 
    }); 

    return <div>{ stations }</div> 
    } 
}