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} /> 
     ); 
    } 
}