反応可能な反応物にajaxの内容を読み込む

Question

それはかなりシンプルに見えますが、私はここで立ち往生しています。私はちょうどajaxコンテンツを読み込んでテーブルにレンダリングしたいと思います。私は奇妙なエラー捕捉されない例外TypeErrorを得た

class ObjectDataExample extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {appData: {}}; 

} 




    componentDidMount() { 
     axios.get('http://test.json') 
      .then((result)=> { 

       //const thisData = result.data; 
       this.setState({appData: result.data}); 
      }) 
    } 

    componentWillUnmount() { 
     this.serverRequest.abort(); 
    } 



// Render your table 
    render() 
    { 
      console.log(this.state.appData); 
      //I can see the above console logs 
     return (
      //this is not coming 
<Table className="react-listing-table table" data={this.state.appData} sortable={[ 
        'Address', 
        'Suburb', 
        'Sale Date' 
       ]} 




        defaultSort={{column: 'Sale Date', direction: 'asc'}} 
        defaultSortDescending> 
//static content like below are rendered 
        <Tr className="react-listing-table table" 
         data={ [ 
          {'Address':'address','Suburb':'suburb','Postc.':'2153','Sale Date':'21\/08\/17','Sale Price':'$640500','Comm':'$19200','LA':'($3545)','BA':'($2540)','Settelement':'12\/02\/2018'}, 
          {'Address':'address','Suburb':'test','Postc.':'2153','Sale Date':'21\/08\/17','Sale Price':'$640500','Comm':'$19200','LA':'($3545)','BA':'TL($2540)','Settelement':'12\/02\/2018'}, 

         ]} /> 



      </Table> 
     ); 
    } 
} 

module.exports = ObjectDataExample; 

window.WB.react.renderListingDataTable = function() { 
    render(
     <Provider store={store}> 
      <ObjectDataExample/> 
     </Provider>, 
     document.getElementById('listing-table-wrapper') 
    ); 
} 

静的なコンテンツを使用して、それをレンダリングすることができる午前：this.data.concatは

私はhttps://github.com/glittershark/reactable