React - Lade JSON und rende Komponente

Question

Wie der Titel sagt, versuche ich eine React-Komponente zu rendern, die Daten enthält, die ich aus einem JSON gepackt habe, indem ich sie mit fetch() geladen habe.

Der API-Anruf funktioniert gut, aber ich kann die Daten nicht wiedergeben.

Hier ist der Code:

class App extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
      user: {} 
 
     } 
 
    } 
 

 
    getUserById(uId) { 
 
     fetch(`https://jsonplaceholder.typicode.com/users/${uId}`) 
 
      .then((response) => { 
 
       return response.json() 
 
      }) 
 
      .then((json) => { 
 
       return json; 
 
      }); 
 
    } 
 

 
    componentDidMount() { 
 
     this.setState({ 
 
      user: this.getUserById(4) 
 
     }) 
 
    } 
 

 
    render() { 
 
     return (
 
      <div> 
 
       <h1>User</h1> 
 
       <p>ID: {this.state.user.id}</p> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App/>, 
 
    document.getElementById("container") 
 
);

<div id="container"></div> 
 

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

Jede Idee, dieses Problem zu lösen?

Answer 1

Ausgabe ist in dieser Zeile:

<div class="container"></div> 

Sie definiert class und es durch getElementById bekommen.

Eine weitere Änderung ist, wird ajax Anruf async so sein getUserById werden die Daten nicht sofort zurück und setStateundefined Wert in Zustandsvariablen nicht die Daten vom Server zurück setzen wird. Um dieses Problem zu lösen, tun Sie die setState sobald Sie die Antwort erhalten.

prüfen dies:

class App extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
      user: {} 
 
     } 
 
    } 
 

 
    getUserById(uId){ 
 
     fetch(`https://jsonplaceholder.typicode.com/users/${uId}`) 
 
     .then((response) => { 
 
      return response.json() 
 
     }) 
 
     .then((json) => { 
 
      this.setState({ 
 
       user: json 
 
      }) 
 
     }); 
 
    } 
 

 
    componentDidMount() { 
 
     this.getUserById(4); 
 
    } 
 

 
    render() { 
 
     console.log(this.state.user); 
 
     return (
 
      <div> 
 
       <h1>User</h1> 
 
       <p>ID: hello</p> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App/>, 
 
    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> 
 
<div id="container"></div>

Hinweis: Sie machen einen ajax Anruf so statt funtion innerhalb setState aufzurufen, führen Sie die setState, wenn Sie die Antwort erhalten, innerhalb .then , wie folgt aus:

.then(json => { 
    this.setState({user: json}); 
}); 

Answer 2

Das Problem, was ich kann s ee - Ihr Versprechen Rückkehr holt keine Daten vom Server erhalten, so, mein Vorschlag ist in Ihrem Versprechen Rückruf SetState so sollte es wie folgt aussieht:

getUserById(uId) { 
    fetch(`https://jsonplaceholder.typicode.com/users/${uId}`) 
     .then(result => result.json()) 
     .then(json => { 
      this.setState({user: json}); 
     }); 
} 
componentDidMount() { 
    this.getUserById(4); 
} 

Answer 3

die getUserById Methode Versuchen Bindung und auch setState für Ihr Benutzerobjekt mit der JSON-Antwort.

Answer 4

Ich denke, dass Ihr Hauptproblem ist, dass getUserById Methode nichts zurückgibt, sollten Sie stattdessen den Staat in es setzen. Dann haben Sie ein Problem mit der ID, die dem Hauptcontainer zugewiesen wurde, aber ich nehme an, dass Sie nur im Snippet einen Fehler gemacht haben.

ich den Code oben getestet haben, versuchen Sie es:

class App extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      user: null 
     } 
    } 

    getUserById(uId) { 
     fetch(`https://jsonplaceholder.typicode.com/users/${uId}`) 
      .then((response) => { 
       return response.json() 
      }) 
      .then((json) => { 
       return json; 
      }) 
      .then((result) => { 
       this.setState({user: result}); 
      }); 
    } 

    componentDidMount() { 
     this.getUserById(4) 
    } 

    render() { 
     console.log(this.state.user); 
     return (
      <div> 
       <h1>User</h1> 
       <p>{this.state.user != null ? this.state.user.id : 0}</p> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(
    <App/>, 
    document.getElementById("container") 
);