オブジェクトの配列からのデータのレンダリング

Question

私は検索フィルタを統合し、検索用語に基づいてpostメソッドを使用してjsonデータ（オブジェクトの配列）を取得しました。 jsonの出力は次のとおりです。

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

しかし、mapメソッドを使用してもjsonデータはDisplayTableコンポーネントにレンダリングされません。私は何を間違えたの？ console.log(<DisplayTable data={queryResult} />）を使用して、私はこのタイプの出力ました：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

をあなたのコード内のいくつかのミスを持って、

1. あなたは非同期関数（axios.postから値を返すことはできません）
2. this.setStateですあなたはそれをthis.setState()と呼ぶ必要がありますが、値を割り当ててはいけません。

この場合、入力フィールドsearchTermからハンドル状態は必要ありません。入力から値を取得して使用することはできますが、サーバーから取得したデータの状態を処理する必要があります。

私はあなたの例をリファクタリングしました、そして今では、ベストプラクティスを読んで、この

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