AJAX 调用 ReactJS 后渲染组件

Question

我想在 AJAX 调用后渲染组件。反应JS

import React from 'react';
import { render } from 'react-dom';
import { Card } from './components/Card';

class App extends React.Component{
    constructor(){
        super();
        this.user = [];
        console.log("constructor");
}
    componentWillMount() {
        console.log("componentWillMount 1");
               $.ajax({
                   method:'get',
                   crossDomain: true,
                   url: "http://127.0.0.1:8000/product/"
               }).done(function(res) {
                   this.user=res;
                   console.log("componentWillMount 2");

               })
    }

    render(){
        var us = this.user
        console.log("render");
        return(
            <div className="container-fluid">
                <div className="container">
                    <div className="row">
                    {(function (rows, i, len) {
                        while (i <len) {
                            rows.push(<div className="col-sm-3">
                                <Card user={us[i]}/>
                                </div>)
                                i++
                        }
                        return rows;
                    })([], 0, us.length)}
                    </div>
                </div>
            </div>
        );
    }
}
render(<App/>,window.document.getElementById("app"));

我想要这个顺序：

• 构造函数
• 组件WillMount 1
• 组件WillMount 2
• 渲染

但它的跟随是这样的

• 构造函数
• 组件WillMount 1
• 渲染
• 组件WillMount 2

Answer 1

由于您有一个 ASYNC 请求，因此不能保证该请求将在组件呈现之前完成，因此您会看到当前行为。此外，由于请求完成后，您正在设置一个类变量。它不会导致重新呈现，即使请求完成更新也不会可见。您需要进行一些更改

首先：将 ASYNC 请求从 componentWillMount 移动到 componentDidMount，因为您应该使用 API 调用的响应 setState 来导致重新渲染，并且在 componentWillMount 中使用 setState 不会触发重新渲染

第二：在你的ajax请求的.done回调中使用箭头函数，因为你需要绑定它才能访问类属性和函数

class App extends React.Component{
    constructor(){
        super();
        this.state = {user: []};
        console.log("constructor");
}
    componentDidMount() {
        console.log("componentDidMount 1");
               $.ajax({
                   method:'get',
                   crossDomain: true,
                   url: "http://127.0.0.1:8000/product/"
               }).done((res) => {
                   this.setState({user:res});
                   console.log("componentDidMount 2");

               })
    }

    render(){
        var us = this.state.user
        console.log("render");
        return(
            <div className="container-fluid">
                <div className="container">
                    <div className="row">
                    {(function (rows, i, len) {
                        while (i <len) {
                            rows.push(<div className="col-sm-3">
                                <Card user={us[i]}/>
                                </div>)
                                i++
                        }
                        return rows;
                    })([], 0, us.length)}
                    </div>
                </div>
            </div>
        );
    }
}
render(<App/>,window.document.getElementById("app"));