axios.getを使用してjsonデータをレンダリングする

Question

私はreact.jsに新しく、JSON形式のサーバーサイドデータをテーブルに取得しようとしています。

export default class TableUser extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    table: [], 
    } 
} 
componentDidMount(){ 
    axios.get('http://www.reddit.com/r/reactjs.json') 
    .then((response)=>{ 
     const table = response.data.map(obj => obj.data); 
     this.setState({ table }); 
     }) 
    .catch((err)=>{ 

    }) 
} 

そして、私のような<div>でこれをレンダリングしています：だから私がやったことある

render(){ 
    <div><p>{this.state.table.kind}</p></div> 
} 

私はkindの値を取得しておりませんなぜですか？ お願いします！

Answer 1

obj.dataは（dataにArrayあるプロパティchildrenがある）ObjectArrayはありませんが、私のようなので、この場合には、より良い変更のデフォルトの状態を考えると、kindのための一つのフィールドを作成します（String）とdataに1つ（Array）それが動作

class TableUser extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = { 
 
     kind: '', 
 
     data: [] 
 
    }; 
 
    } 
 
    
 
    componentDidMount(){ 
 
    axios 
 
     .get('https://www.reddit.com/r/reactjs.json') 
 
     .then(({ data })=> { 
 
     \t this.setState({ 
 
      kind: data.kind, 
 
      data: data.data.children 
 
     }); 
 
     }) 
 
     .catch((err)=> {}) 
 
    } 
 
     
 
    render() { 
 
    const child = this.state.data.map((el, index) => { 
 
     return <div key={index}> 
 
     <p>Title - { el.data.title }</p> 
 
     <p>Author - { el.data.author }</p> 
 
     </div> 
 
    }); 
 

 
    return <div> 
 
     <p>{ this.state.kind }</p> 
 
     <div>{ child }</div> 
 
    </div>; 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <TableUser />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js"></script> 
 
<div id="container"></div>