Question

所以我在我的代码学校之后开始我的第一个项目，并立刻用我的ajax调用来阻止我。似乎我的渲染是在ajax调用之前渲染之后，因此当我尝试显示我从数据库中抓取的信息时出现错误

import React, { Component } from 'react';

import $ from 'jquery';

class StepFive extends Component{
  constructor(props) {
  		super(props)
  		this.state = {
  			ingredients: []

      }
}
  	ingredientsGrab() {
  		var me = this;
  		$.ajax({
  			method: 'GET',
  			url: 'http://localhost:3002/api/ingredients',
  		})
  		.then(function(ingredients){
            me.setState({ingredients: ingredients})
  		})
  	}
    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

呈现组件时的正常行为，然后您获取数据并使用此数据重新呈现此组件。但为此你应该使用componentDidMount。

检查文档： https://facebook.github.io/react/docs/react-component.html#componentdidmount

组件在ajax调用之前和之后呈现

1 个答案: