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 this和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>

我收到了这个错误：

TypeError：无法读取未定义的属性“进程” 在TableBody.eval（eval at ./node_modules/react-bootstrap-table/lib/TableBody.js({ {3}}），：199：32）在Array.map（本机）在TableBody.eval（eval at ./node_modules/react-bootstrap-table/lib/TableBody.js({ {3}}），：198：47）在Array.map（本机）在TableBody.render（eval at ./node_modules/react-bootstrap-table/lib/TableBody.js({ {3}}），：197：39）在TableBody.render（eval at ./node_modules/react-proxy/modules/createPrototypeProxy.js({ {3}}）,:46：30）在eval（eval at ./node_modules/react-dom/lib/ReactCompositeComponent.js({ {3}}），：798：21） at measureLifeCyclePerf（eval at ./node_modules/react-dom/lib/ReactCompositeComponent.js（http://localhost:8080/bundle.js:3702:1），：77：12）在ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext（eval at ./node_modules/react-dom/lib/ReactCompositeComponent.js({ {3}}），：797：25）在ReactCompositeComponentWrapper._renderValidatedComponent（eval at ./node_modules/react-dom/lib/ReactCompositeComponent.js（http://localhost:8080/bundle.js:3702:1），：824：32）

我该如何解决这个问题？

Answer 1

在组件装载后调用Render（参见：https://stackoverflow.com/a/37123901/5813839）。这里的问题是竞争条件。你获取json并异步等待响应，同时调用render并中断。

修复是允许你的组件在没有json数据的情况下运行（空白或临时保持值），然后只要json被加载到你的状态，react就会再次执行render并更新你的组件。

Answer 2

将数据加载到父容器组件中。如果容器没有数据，则渲染一个加载元素。当数据到达时，使用数据更新容器组件状态以使用数据呈现子组件。在数据提取和状态控制的容器组件之间分离您的关注点以及处理应用程序的可视方面的表示组件始终是一个好主意。看看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} />
        );
    }
}

Answer 3

我的解决方案就是这样做：

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

reactJS componentWillMount在render方法之后运行

3 个答案: