Komponente wird vor und nach Ajax Anruf

Question

Rendering So arbeite ich an meinem ersten Projekt nach meiner Code-Schule und im schlagen einen Haken sofort mit meinem Ajax Anruf. es scheint, meine macht vor dem Ajax-Aufruf zu machen und nach, damit ich eine Fehlermeldung erhalten, wenn ich versuche, Informationen anzuzeigen, die ich aus der Datenbank

import React, { Component } from 'react'; 
 

 
import $ from 'jquery'; 
 

 
class StepFive extends Component{ 
 
    constructor(props) { 
 
    \t \t super(props) 
 
    \t \t this.state = { 
 
    \t \t \t ingredients: [] 
 

 
     } 
 
} 
 
    \t ingredientsGrab() { 
 
    \t \t var me = this; 
 
    \t \t $.ajax({ 
 
    \t \t \t method: 'GET', 
 
    \t \t \t url: 'http://localhost:3002/api/ingredients', 
 
    \t \t }) 
 
    \t \t .then(function(ingredients){ 
 
      me.setState({ingredients: ingredients}) 
 
    \t \t }) 
 
    \t } 
 
    componentWillMount() { 
 
     this.ingredientsGrab() 
 
    } 
 

 
render() { 
 
    console.log(this.state.ingredients[0], 'in render1') 
 
     return(
 
     <div className='stepFiveBox'> 
 
      <span>bubbly</span> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
export default StepFive

<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> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

enter image description here

Answer 1

packte Es ist normal, Verhalten, wenn Ihre Komponente gerendert wird und Sie dann Daten abrufen und diese Komponente mit diesen Daten erneut rendern. Aber dafür sollten Sie componentDidMount verwenden.

prüfen docs: https://facebook.github.io/react/docs/react-component.html#componentdidmount