javascript - ReactJS componentWillMount 在 render 方法之后运行

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

问题是渲染方法在此之前运行，并且在渲染表之前 json 数据不存在

<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-table/lib/TableBody.js(http://localhost:8080/bundle.js:3702:1)，:199:32) 在 Array.map( native ) 在TableBody.eval(在./node_modules/react-bootstrap-table/lib/TableBody.js(http://localhost:8080/bundle.js:3702:1)，:198:47) 在 Array.map( native ) 在 TableBody.render (在 ./node_modules/react-bootstrap-table/lib/TableBody.js ( http://localhost:8080/bundle.js:3702:1 ), :197:39 处进行评估) 在 TableBody.render (在 ./node_modules/react-proxy/modules/createPrototypeProxy.js ( http://localhost:8080/bundle.js:5252:1 ), :46:30 处进行评估) 在评估(评估在./node_modules/react-dom/lib/ReactCompositeComponent.js(http://localhost:8080/bundle.js:4238:1)，:798:21) 在measureLifeCyclePerf(在./node_modules/react-dom/lib/ReactCompositeComponent.js(http://localhost:8080/bundle.js:4238:1)处进行评估，:77:12) 在 ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (在 ./node_modules/react-dom/lib/ReactCompositeComponent.js ( http://localhost:8080/bundle.js:4238:1 ), :797:25 处评估) 在 ReactCompositeComponentWrapper._renderValidatedComponent (在 ./node_modules/react-dom/lib/ReactCompositeComponent.js ( http://localhost:8080/bundle.js:4238:1 ), :824:32 处评估)

我该如何解决这个问题？

Answer 1

渲染在组件安装后调用(请参阅: https://stackoverflow.com/a/37123901/5813839 )。这里的问题是竞争条件。您获取 json 并异步等待响应，同时调用 render 并中断。

修复方法是允许您的组件在不存在 json 数据(空白或临时保存值)的情况下运行，然后一旦 json 加载到您的状态中，react 将再次执行渲染并更新您的组件。