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调用的响应来设置state，以便重新渲染并在componentWillMount中使用setState不会触发重新渲染

第二个：在ajax请求的<httpCookies requireSSL="true" />回调中使用箭头函数，因为您需要绑定它以访问类属性和函数

.done

在AJAX调用ReactJS之后渲染组件

1 个答案: