ReactJS 渲染调用两次，状态为空答案

【问题标题】：ReactJS render called twice with empty StateReactJS 渲染调用两次，状态为空
【发布时间】：2017-03-15 14:11:56
【问题描述】：

我是 ReactJS 的新手，在我的一个组件渲染块中，地图被正确执行，后来它显示错误。

class CustomerList extends Component {
        constructor(props,context) {
            super(props, context);
            this.loadCustomersFromServer()
      }
        loadCustomersFromServer() {
            $.ajax({
                url: '/customers',
                dataType: 'json',
                success: (data) => {
                    this.setState({results: data});
                },
                error: (xhr, status, err) => {
                    console.error(this.props.url, status, err.toString());
                }
            });
        }
        componentDidUpdate(){
            console.log("componentDidUpdate")
        }
        componentWillUpdate(){
            console.log("componentWillUpdate")
        }
        render() {
        return (
            <div className="col-lg-12">
                <h1>Registered Clients</h1>
                <div className="table-responsive">
                    <table className="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                             this.state.results.customers.map((customer, index) => {
                                return <Customer key={index+1} index={index+1} customer={customer}/>
                             })
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

export default CustomerList

在我的浏览器中，所有表格都完美呈现，但在我的控制台中显示错误提示

无法在 CustomerList.render (CustomerList.js:44) 处读取 null 的属性“结果”

在这一行

this.state.results.customers.map

我是否错过了一些使我的地图函数在空状态下触发两次的东西？？

【问题讨论】：

标签： reactjs

【解决方案1】：

所以，

this.state.results.customers.map 没有您要添加的数据。

尝试添加

constructor(props,context) {
    super(props, context);
    this.loadCustomersFromServer();
    this.state = {
      results:{customers:[]} ,
    };
}


loadCustomersFromServer() {
    $.ajax({
        url: '/customers',
        dataType: 'json',
        success: (data) => {
            this.setState({results: data});
        },
        error: (xhr, status, err) => {
            console.error(this.props.url, status, err.toString());
        }
    });
}

就在构造函数的下方，让我知道会发生什么。

【讨论】：

内部构造函数？？
我在启动服务器时收到错误消息，状态为 Unexpected token (10:8) =
如果我在构造函数和 componentDidMount 中说 this.setState({results:[]}) 如果我调用我的 api，那么我的浏览器上会打印一个空表
@Pathfinder 好的，我对构造函数一有点陌生。试着像这样给里面。
不，问题出在初始设置上，您需要告知存在一个名为results 的状态。其他一切都是正确的。检查我更新的答案。

【解决方案2】：

将您的课程代码更改为：

class CustomerList extends Component {
    state = {results:{customers:[]}};
    constructor(props,context) {
        super(props, context);
        this.loadCustomersFromServer()
    }
    .....
}

我假设你的 babel 设置允许class properties。否则在构造函数中移动状态初始化代码，就像提到的@nevin-madhukar-k。

【讨论】：

【解决方案3】：

你必须检查结果是否存在并且与null不相等，然后执行map函数，试试这个：

   <div className="col-lg-12">
                <h1>Registered Clients</h1>
                <div className="table-responsive">
                    <table className="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                             this.state.results && this.state.results.customers.map((customer, index) => {
                                return <Customer key={index+1} index={index+1} customer={customer}/>
                             })
                            }
                        </tbody>
                    </table>
                </div>
            </div>

【讨论】：