ajax - 在 AJAX 调用 ReactJS 后呈现组件

Question

我想在 AJAX 调用后渲染组件。 ReactJS

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"));

我要按这个顺序:

• 构造函数
• componentWillMount 1
• componentWillMount 2
• 渲染

但它是这样的

• 构造函数
• componentWillMount 1
• 渲染
• componentWillMount 2

Answer 1

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

首先:将 ASYNC 请求从 componentWillMount 移至 componentDidMount，因为您应该使用 API 调用的响应来设置状态以引起重新渲染，并且在 componentWillMount 中使用 setState 不会触发重新渲染

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

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"));