コンポーネントはajaxコールの前後にレンダリングされます

Question

私は自分のコード・スクールの後に私の最初のプロジェクトに取り組んでいます。私が

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

それは普通のことです私は、データベースからつかんだ情報を表示しようとするので、私はエラーを取得し、私はAJAX呼び出しの前と後にレンダリングされたレンダリングと思われますコンポーネントがレンダリングされた後にデータを取得し、このコンポーネントでこのコンポーネントを再レンダリングするときの動作です。しかし、これはcomponentDidMountを使うべきです。

チェックドキュメント： https://facebook.github.io/react/docs/react-component.html#componentdidmount