React JSONファイルのインポート、コンテンツのStateへの格納、レンダリング

Question

JSONデータで状態を更新してリスト項目として出力するにはどうすればよいですか？ここではページ上

私はcomponentDidMountにSETSTATE機能を使用したい（）、それはすぐに状態のデータを格納するページがロードされるようにして出力が

import React from 'react'; 
import peopleData from '../persons.json'; 

class App extends React.Component { 
    constructor(){ 
    super(); 
    this.state = { 
     people: [] 
    } 
    } 

    componentDidMount(){ 
    console.log(peopleData); 
    } 

    render() { 
    return (
     <div> 
     <ul> 
      //Loop out this.state.people.names here as List Items 
     </ul> 
     </div> 
    ) 
    } 
} 

export default App; 

はへのインポート私のJSONデータイムです上記。

[ 
{ 
    "Name": "Lisa", 
    "Age": 100 
}, 

{ 
    "Name": "Bob", 
    "Age": 44 
}, 

{ 
    "Name": "Joe", 
    "Age": 17 
}, 

{ 
    "Name": "Jesper", 
    "Age": 6 
} 
] 

Answer 1

peopleプロパティのデフォルト状態としてpeopleDataを割り当てることはできませんか？それは同じ方法で動作し、より簡潔です。

class App extends React.Component { 
    constructor(){ 
    super(); 
    this.state = { 
     people: peopleData, 
    } 
    } 

    render() { 
    const list = this.state.people.map(d => <li>{p.Name} - {p.Age}</li>); 
    return (
     <div> 
     <ul> 
      {list} 
     </ul> 
     </div> 
    ) 
    } 
}