反应导入JSON文件，将内容存储在状态并呈现出来

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

难道你不能只将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> 
    ) 
    } 
}