JSON-Datei importieren, Inhalt in Status speichern und rendern

Question

Wie aktualisiere ich den Status mit meinen JSON-Daten und gebe ihn dann als Listenelemente aus?

ich die setState Funktion in componentDidMount() verwenden möchten, so dass, wenn die Seite geladen wird es die Daten im Zustand speichert sofort und gibt es auf der Seite

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; 

Hier meine JSON-Daten im importiert zu obenstehendes.

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

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

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

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

Answer 1

Können Sie PeopleData nicht einfach als Standardzustand der Personeneigenschaft zuweisen? Es funktioniert genauso und es ist prägnanter.

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