Wie kann man auf die Requisiten in der Reaktionskomponente zugreifen?

Question

import React, { Component } from 'react'; 

class newsList extends React.Component { 

    render(){ 

     return(
      <div> 
       {JSON.stringify(this.props.arr)} 
      </div> 
     ) 
    } 

} 

export default newsList; 

Im obigen Code ist ein Objekt, das von einer anderen Komponente stammt. Ich kann die Daten mit JSON.stringify(this.props.arr.result) anzeigen. Aber sobald ich es mit JSON.stringify(this.props.arr.result.id) ändere, erhalte ich einen Fehler sagt TypeError: this.props.arr.result is undefined. Ich kann nicht verstehen, was ich hier falsch mache? stattdessen

Answer 1

Ist this.props.arr Array? Wenn ja, sollte die Render-Funktion sein

render(){ 
    var ids = this.props.arr.map(e=>(<div>e.result.id</div>)) 
    return(
     <div> 
      {ids} 
     </div> 
    ) 
} 

Answer 2

Versuchen Sie diesen Code aus:

class NewsList extends React.Component { 
    constructor(props) { 
     super(props); 
     this.props = props; 
    } 
    render() { 
     return <div>{this.props.arr}</div>; 
    } 
} 

A React.Component ‚s constructor immer props erhält als es erste Parameter ist.

Answer 3

Ich bin fast sicher, dass Ihr this.props.arr zu einem bestimmten Zeitpunkt undefined ist, aber dann schließlich einen Wert zugewiesen bekommt. Ihr anfängliches Rendering wird eine null oder undefined erhalten, aber wenn Sie versuchen, einen Schritt weiter in einen Schlüssel zu gehen, der nicht existiert, werden Sie diesen Fehler werfen. Sie können einen booleschen Wert verwenden, um zu steuern, was am Anfang gerendert wird.

Anstelle dieser Codezeile:

{JSON.stringify(this.props.arr)} 

versuchen Sie dies:

{this.props.arr ? JSON.stringify(this.props.arr) : null} 

edit: ist Ihr Problem mit this.props.arr.result.id? Wenn ja, verwenden Sie diese stattdessen

{this.props.arr.result ? JSON.stringify(this.props.arr.result.id) : null}