Zugreifen auf Arrays von Requisiten

Question

In App.js undefiniert Zurückgeben habe ich eine Komponente in die ich einige Stützen passieren:

<Populated 
     addressParts={this.state.info} 
/> 

this.state.info ist ein Objekt, das andere Objekte enthält:

title: 'blahblahblah' 
details: Array(3) 

... und so weiter ...

details hat folgende Felder:

name: 'this is a question' 
levelOfDifficulty: 100000 

... und so weiter ...

Mein Code ist wie folgt:

import React from 'react' 

class Populated extends React.Component { 

    render() { 
    return(
     <h1>{this.props.addressParts.title}</h1> 
    ) 
    } 
} 

export default Populated 

Aber auch wenn ich versuche, this.props.addressParts.details console.log [0 ] .name, bekomme ich folgende Fehlermeldung:

TypeError: undefined is not an object (evaluating 'this.props.addressParts.details[0]') 

Was mache ich hier falsch? Muss ich die Requisiten irgendwie in einen Ausgangszustand umwandeln? Danke im Voraus.

Answer 1

Angenommen, Sie übergeben die Props korrekt, erhalten Sie den Fehler, weil die Komponente rendert und versucht, auf this.props.addressParts.details[0] zuzugreifen, bevor die Daten abgerufen wurden. Um zu vermeiden, einen Fehler zu werfen, können Sie an der Spitze der Render-Methode der Komponente setzen diese, die den Fehler verursacht:

if (!this.props.addressParts) return null; 

Sobald die Daten abgerufen und die Requisiten werden aktualisiert, wird die Komponente rerender.

Sie können auch lodash _.get(this.props, 'addressParts.details[0]') verwenden, die undefined zurückgibt, anstatt einen Fehler zu werfen, wenn this.props.addressParts nicht definiert ist.

Answer 2

Sie stellen die Requisiten nicht im ersten Renderaufruf bereit, weil Sie den Status festlegen, nachdem Sie die Daten asynchron abgerufen haben.

Sie könnten eine conditional rendering entweder innerhalb der Populated Komponente oder innerhalb App Komponente tun.

Hier ist ein laufendes Schnipsel mit Ihrem Code, beachten Sie, dass Sie die info auf Null initiieren müssen, damit die aktuelle Bedingung funktioniert habe. Sie können es auch auf andere Art und Weise tun, dies ist nur eine davon.

class Populated extends React.Component { 
 

 
    render() { 
 
    const { addressParts } = this.props || {}; // just in case you want do defualt to an empty object 
 
    return (
 
     <div> 
 
     <h1>{addressParts.title}</h1> 
 
     <h2>{addressParts.details.name}</h2> 
 
     <h3>{addressParts.details.levelOfDifficulty}</h3> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     // you must initilize info to null so the current condition will work 
 
     info: null 
 
    } 
 
    } 
 

 
    componentDidMount() { 
 
    // just mimic an async fetch here 
 
    setTimeout(() => { 
 
     this.setState({ 
 
     info: { 
 
      title: 'im here', 
 
      details: { 
 
      name: 'this is a question', 
 
      levelOfDifficulty: 100000 
 
      } 
 
     } 
 
     }) 
 
    }, 1200); 
 
    } 
 

 
    render() { 
 
    const { info } = this.state; 
 
    return (
 
     <div> 
 
     { 
 
      info ? 
 
      <Populated addressParts={this.state.info} /> : 
 
      <div>Loading data...</div> 
 
     } 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<App />, document.getElementById('root'));

<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="root"></div>