reactJS componentWillMount之後運行呈現方法

Question

在我reactjs程序，我這樣做：

constructor(props) { 
    super(props); 
    this.state = { 
     myTasks: tasksData, 
     processes: [] 
    }; 
} 

componentWillMount() { 
    fetch('http://localhost:9000/dashboard/processes') 
     .then(function (response) { 
      return response.json() 
     }).then(function (json) { 
     this.setState({processes: json}); 
    }.bind(this)).catch(function (ex) { 
     console.log(ex) 
    }); 
} 

問題是渲染方法運行bevor這和JSON數據是不是有正確的bevor表呈現

<BootstrapTable 
     react- data={this.state.processes} 
     search={true} 
    options={options} 
     striped hover condense 
     pagination={true}> 
     <TableHeaderColumn width='200' dataField='process' searchable={true} isKey><T value="dashboard.processes.process"/></TableHeaderColumn> 
     <TableHeaderColumn width='100' dataField='status'><T value="dashboard.processes.status"/></TableHeaderColumn> 
      <TableHeaderColumn width='100' dataField='progress' dataFormat={progressBarFormatter}><T value="dashboard.processes.progress"/></TableHeaderColumn> 
      <TableHeaderColumn width='100' dataField='deadline'><T value="dashboard.processes.deadline"/></TableHeaderColumn> 
    </BootstrapTable> 

，所以我得到這個錯誤：

類型錯誤：在TableBody.eval無法讀取的不確定 財產 '過程'（在./node_modules/react-bootstrap EVAL -table/lib/TableBody.js（http://localhost:8080/bundle.js:3702:1），：199：32） at Array.map（native） at TableBody.eval（eval at ./node_modules/react-bootstrap-table/lib/TableBody.js（http://localhost:8080/bundle.js:3702:1） ）：198：47） at Table.map（native） at TableBody.render（eval at ./node_modules/react-bootstrap-table/lib/TableBody.js（http://localhost:8080/bundle.js:3702:1），：197：39） at TableBody .render（EVAL在./node_modules/react-proxy/modules/createPrototypeProxy.js（http://localhost:8080/bundle.js:5252:1）：46：30） 在EVAL（在./node_modules/react-dom/lib/ReactCompositeComponent.js的eval（http://localhost:8080/bundle.js:4238:1）， ：798：21） at measureLifeCyclePerf（eval at ./node_modules/react-dom/lib/ReactCompositeComponent.js（http://localhost:8080/bundle.js:4238:1），：77：12） at Re actCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext（在./node_modules/react-dom/lib/ReactCompositeComponent.js的eval（http://localhost:8080/bundle.js:4238:1）：797：25） 在ReactCompositeComponentWrapper._renderValidatedComponent（EVAL在./node_modules/react-dom/lib/ReactCompositeComponent.js（ http://localhost:8080/bundle.js:4238:1），：824：32）

我該如何解決這個問題？

Answer 1

，解決方案是這樣的：

if(this.state.processes.length === 0) return <p>Bitte warten sie ...</p>; 
    return (

Answer 2

在組件掛載後調用渲染（請參閱：https://stackoverflow.com/a/37123901/5813839）。這裏的問題是一個競爭條件。您獲取json並異步等待響應，同時渲染被調用並中斷。

修復是讓您的組件在沒有json數據存在的情況下運行（空白或臨時保存值），然後只要json加載到您的狀態，反應將再次執行渲染並更新您的組件。

Answer 3

將數據加載到父容器組件中。如果容器沒有數據，則渲染一個加載元素。數據到達時，使用數據更新容器組件狀態以使用數據呈現子組件。將數據獲取和狀態控制的容器組件與用於處理應用程序的視覺方面的表示組件之間的關注區分開來總是一個好主意。看看Dan Abramov的Presentational and Container Components。我

import React, { Component } from "react"; 

export default class Container extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      processes: null 
     }; 
    } 

    componentDidMount() { 
     fetch('http://localhost:9000/dashboard/processes') 
      .then(function (response) { 
       return response.json() 
      }).then(function (json) { 
       this.setState({processes: json}); 
      }.bind(this)).catch(function (ex) { 
       console.log(ex) 
      }); 
    } 

    render() { 
     return (
      this.state.processes ? 
       <div class="loading">Loading data...</div> : 
       <BootstrapTable 
        react-data={this.state.processes} 
        search={true} 
        options={options} 
        striped hover condense 
        pagination={true} /> 
     ); 
    } 
}