Question

我是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的属性'results'

在这一行

this.state.results.customers.map

我是否遗漏了一些让我的地图功能以空状态触发两次的东西？

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

在构造函数的正下方，并且知道会发生什么。

Answer 2

将您的班级代码更改为：

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

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

Answer 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>

使用空状态调用两次ReactJS渲染

3 个答案: