componentDidMount() wird nicht aufgerufen, wenn die reaktive Komponente gemountet wird

Question

Ich habe versucht, einige Daten von einem Server zu holen, und aus irgendeinem seltsamen Grund wird componentDidMount() nicht ausgelöst, wie es sein sollte. Ich fügte eine console.log() Anweisung innerhalb von componentDidMount() hinzu, um zu überprüfen, ob es zündete. Ich weiß, die Anfrage an den Server funktioniert so, wie es sollte. Wie ich es außerhalb von Reagieren benutzte und es funktionierte wie es sollte.

class App extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     obj: {} 
    }; 
    }; 

    getAllStarShips() { 
    reachGraphQL('http://localhost:4000/', `{ 
    allStarships(first: 7) { 
     edges { 
     node { 
      id 
      name 
      model 
      costInCredits 
      pilotConnection { 
      edges { 
       node { 
       ...pilotFragment 
       } 
      } 
      } 
     } 
     } 
    } 
    } 
    fragment pilotFragment on Person { 
    name 
    homeworld { name } 
    }`, {}). then((data) => { 
    console.log('getALL:', JSON.stringify(data, null, 2)) 
     this.setState({ 
     obj: data 
     }); 
    }); 
    } 

    componentDidMount() { 
    console.log('Check to see if firing') 
    this.getAllStarShips(); 
    } 

    render() { 
    console.log('state:',JSON.stringify(this.state.obj, null, 2)); 
    return (
    <div> 
     <h1>React-Reach!</h1> 
     <p>{this.state.obj.allStarships.edges[1].node.name}</p> 
    </div> 
); 
} 

} 

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

Answer 1

Das Problem hierbei ist, dass die Render-Methode abstürzt, weil die folgende Zeile einen Fehler zu generieren

<p>{this.state.obj.allStarships.edges[1].node.name}</p> 

Fix dies nicht this.state.obj.allStarships.edges verwenden [1] .node.name direkt, es sei denn, Sie können garantieren, dass jeder Empfänger definiert ist.