MySQLローをロードした後に負荷反応コンポーネントをロードする[ReactJS]

Question

MySQLデータからデータをロードしてコンポーネントにレンダリングしようとしましたが、AJAXを使用しているので、データロードが完了する前にReactコンポーネントがロードされていました。 。

通常、この状況を処理するためにsetTimeoutが使用されていますが、Reactコンポーネント全体をすべてのデータがロードされるまで待機させることができますか？ここで

は私のコードのサンプルです、私はそれが役に立てば幸い：

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

ReactJS環境でコードを実行する方法については、以下を参照してください。私が変更され何の

概要：

• があなたの<Tree/>コンポーネント内でごloadSkillsFromServer機能を入れ子になりました。
• あなたの<Tree/>コンポーネントがマウントされるとすぐにあなたの機能が起動されます。
• arrow functionシンタックスを使用して、前記関数のスコープをバインドしました。
• UI用にコンポーネントのstate内にloadingというプロパティを作成しました。
• 成功した場合、結果のデータをthis.state.dataに連結し、this.state.loadingをfalseに切り替える必要がありました。

また、HTTPリクエストを処理するためにAxiosなどのライブラリをチェックアウトすることをおすすめします。私は$がjQueryへの参照であると仮定します。同じプロジェクトでjQueryとReactを使用することは、通常、悪い習慣とみなされます。

// React. 
import React from 'react' 

// React Sortable Tree. 
import SortableTree, { 
    addNodeUnderParent, 
    removeNodeAtPath, 
    getFlatDataFromTree, 
    getTreeFromFlatData, 
} from 'react-sortable-tree' 

// <Tree/>. 
export default class Tree extends React.Component { 

    // Constructor. 
    constructor(props) { 

    // Super Props. 
    super(props) 

    // State. 
    this.state = { 
     loading: true, 
     data: false 
    } 
    } 

    // Render. 
    render() { 

    try { 

     // Extract State. 
     const { 
     state: { 
      loading, 
      data 
     } 
     } = this 

     // Loading? 
     if (loading) { 
     return (
      <div>Loading</div> 
     ) 
     } 

     // Data? 
     if (!data) { 
     return (
      <div>!Data.</div> 
     ) 
     } 

     // Complete Content. 
     return (
     <div>Complete Content.</div> 
    ) 

    } catch (error) { 

     // Handle Error. 
     console.log(error) 
    } 
    } 

    // Did Mount. 
    componentDidMount() { 

    // Load Skills From Server. 
    this.loadSkillsFromServer() 
    } 


    // Load Skills From Server. 
    loadSkillsFromServer =() => { 

    try { 

     console.log("Loading Skills From Server ..") 

     // $ Ajax Request. 
     $.ajax({ 

     url: '/api/skills', 
     dataType: 'json', 
     cache: false, 
     success:() => { 

      // Update State. 
      return this.setState({ 
      loading: false, 
      data 
      },() => { 

      // Complete. 
      console.log('Skills Loaded.') 
      }) 

     }, 
     error: function(xhr, status, err) { 

      return console.error('/api/skills', status, err.toString()) 
     } 
     }) 

    } catch (error) { 

     // Handle Error. 
     console.log(error) 
    } 
    } 
} 

Answer 2

コンテンツがロードされているかどうかを格納するstate反応し管理します。

this.state = { 
    loading: true 
} 

次に、あなたのAJAX呼び出しのsuccessコールバックに、setState({ loading: false })を呼び出します。 コンポーネント内で、this.state.loadingに基づいて条件付きレンダリングを実装します。本当の場合はスピナーを表示し、そうでない場合はコンテンツを表示します。