wie mit json in react.js

Question

Hier werden Daten in json arbeiten: https://jsonplaceholder.typicode.com/posts

Hier meinen Code. Nach dem Ausführen habe ich einen Fehler in console.log: "Objekte sind nicht gültig als React Kind (gefunden: Objekt mit Schlüsseln {userId, id, title, body}). Wenn Sie eine Sammlung von Kindern darstellen möchten". Warum, wenn ich console.log (Antwort) in COmpoonentDidMount habe ich meine Array von Objekten, kann aber nicht innerhalb von render() {} verwenden. Was mache ich falsch?

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

    componentDidMount() { 
     var component = this; 
     api.fetchInfo() 
     .then(function(response) { 
      component.setState({ users: response }); 
     }); 
    } 

    render() { 
    //console.log('here' + this.state.users); 
    return (
     <ul> 

     <p>{this.state.users}</p> 
     { 
      this.state.users.map(
       function(elem) { 
        return <li>{elem.userId}</li> 
       } 
      ) 
     } 
     </ul> 
    ) 
    } 
} 


ReactDOM.render(
    <App />, 
    document.getElementById('app') 
); 

Answer 1

Diese Linie von jsx:

<p>{this.state.users}</p> 

fragt Reagieren ein einfaches Objekt zu machen. Und es weiß nicht, wie man das für dich macht. Wenn Sie die json wollen auf die Seite gedruckt werden, können Sie es stringify:

<p>{JSON.stringify(this.state.users)}</p> 

Andernfalls könnten Sie wollen map durch und machen Markup, das für Sie Sinn macht.

Answer 2

Das Problem wird durch die Leitung verursacht wird

<p>{this.state.users}</p> 

Sie es entfernen konnte oder -nutzung:

<p>{JSON.stringify(this.state.users)}</p> 

Kurz gesagt, ist die Erklärung dazu:

• Innerhalb jeder jsx blockieren, können Sie Javascript in geschweiften Klammern einbetten, dh {}
• Das Ergebnis des Javascript in der {} Block muss sein: eine Zeichenfolge, Null oder ein anderes gültiges Jsx-Objekt. Wenn es etwas anderes ist, werden Sie den Fehler sehen, den Sie gesehen haben.

In Ihrem Fall haben Sie auch einen gültigen Block:

{ 
     this.state.users.map(
      function(elem) { 
       return <li>{elem.userId}</li> 
      } 
     ) 
    } 

Der Block oben zurückkehrt gültig jsx, die ein Bündel von <li> Elementen ist. Diese <li> Elemente selbst haben eine {elem.userId}, die direkt als String interpretiert werden kann.