Legen Sie die abgerufenen JSON-Daten als Status fest und verwenden Sie sie.

Question

Ich bin ein Neuling, um zu reagieren, also versuche ich, grundlegende Konzepte zu lernen.

ich Daten über eine API immer fest einprogrammiert ich einige Daten in zu Lernzwecken, mit der Bitte holen wie so:

componentDidMount() { 
    fetch("myserver.com/api/a/1") 
    .then(function(response) { 
     response.json() 
    }) 
} 

und in meinem Konstruktor habe ich den Zustand Daten: ‚false‘:

constructor(props) { 
    super(props) 

    this.state = {data: 'false'}; 
} 

Aber von hier an bin ich verloren. Ich habe drei verschiedene Zeichenfolgen im JSON-Objekt, das ich durch meine API erhalte, aber ich weiß nicht, wie man auf sie zugreift. Ich habe versucht, SetState in componentDidMount, aber ich bekomme eine Menge Fehler.

Wie machen Sie in solchen Situationen? Wo sollte ich den Status setzen und wie greife ich generell auf JSON-Objekte zu?

Vielen Dank im Voraus!

Answer 1

versuchen, etwas wie folgt aus:

 export default class YourComponent extends React.Component { 

     constructor(props) { 
      super(props) 

      this.state = {data: 'false'}; 
     } 

     componentDidMount() { 
       this._getData(); 
     } 


     _getData =() => { 
       fetch("myserver.com/api/a/1") 
       .then(response => { 
        if (response.ok) { 
        return response; 
       } else { 
       let errorMessage = 
        `${response.status(${response.statusText})`, 
        error = new Error(errorMessage); 
        throw(error); 
       } 
       }) 
       .then(response => response.json()) 
       .then(json =>{ 
        console.log(json); 
        this.setState({ data: json.data }) 
       }); 
      } 

      render() { 
       return (
       <div> 
        { 
        this.state.data && 
        this.state.data.map((item, key) => 
         <div key={key}> 
         {item} 
         </div> 
        )} 
       </div> 
     )} 
    }