Question

我正在尝试从MySQL数据加载数据以在我的组件中呈现它，但我注意到我的React组件在数据加载完成之前加载，因为我正在使用AJAX。

我知道setTimeout通常用于处理这种情况，但是，它是否可以用于使整个React Component等待所有数据加载，如果是这样的话。

以下是我的代码示例，希望有所帮助：

Tree.js

import React, { Component } from 'react';
import SortableTree, { addNodeUnderParent, removeNodeAtPath,  
getFlatDataFromTree,getTreeFromFlatData, } from 'react-sortable-tree';

function loadSkillsFromServer() {
    console.log("Loading...");
    let dbData = [];
    $.ajax({
        url: '/api/skills',
        dataType: 'json',
        cache: false,
        success: function(data) {
            //set the state with the newly loaded data so the display 
            //will update
            dbData = data;
            console.log("Loaded");
            console.log(dbData);
        }.bind(this),
        error: function(xhr, status, err) {
            console.error('/api/skills', status, err.toString());
        }.bind(this)
    });
    return dbData;
}

const initialData = loadSkillsFromServer();

export default class Tree extends Component {
      constructor(props) {...}
      render() {...}
}

Answer 1

管理React state以存储内容是否已加载。

this.state = {
  loading: true
}

然后，在您的AJAX通话的success回调中，拨打setState({ loading: false })。在组件内部，基于this.state.loading实现条件呈现;如果它是真的则显示一个微调器，否则显示内容。

Answer 2

有关详细信息，请参阅Arrow Functions和Axios。

CREATE PROCEDURE ToInsertTx(@fileid INT)
AS
BEGIN
    SET @fileid = (SELECT FileId FROM Tm)

    (INSERT @fileid as fileid INTO Tx,
    INSERT RowNo identity(101, 1))

    UNION ALL

    (SELECT * INTO Tx FROM Ts)
END

加载MySQL行后加载React组件[ReactJS]

2 个答案: