AJAX 调用 ReactJS 后渲染组件

Posted 2023-02-22

【中文标题】AJAX 调用 ReactJS 后渲染组件

【英文标题】：Render component after AJAX call ReactJS

【发布时间】：2018-04-20 19:41:17

【问题描述】：

我想在 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

【参考方案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"));

【讨论】：

感谢 Shubham Khatri