错误：React JS 无法读取属性答案

【问题标题】：Error : React JS can not read the property错误：React JS 无法读取属性
【发布时间】：2016-02-21 18:12:31
【问题描述】：

我有 jsx 类，我正在尝试显示一些从 API 调用中检索的联系人数据，但是一旦我添加了 this.state.contacts.map 函数，它就会给我一个错误，说 TypeError：无法读取 null 的属性“联系人”

import { Component, PropTypes } from 'react';
import { FetchDetails } from '../api_call/apis.js';

export default class FriendRight extends Component {

  getInitialState() {
    return {
      contacts: []
    }
  }

  handleClick() {
    FetchDetails().initialize().then(function(results) {
      this.setState({
        contacts: results.contact
      });
    }.bind(this));
  }

  render(){
    var items = this.state.contacts.map(function(item){
      return <a href="#" className="list-group-item ">
        <h4 className="list-group-item-heading">{item.fullName}</h4>
      </a>;
    });

    return(
      <div>
        <ul class="list-group">
          <li className="list-group-item"><button type="button" className="btn btn-default" onClick={this.handleClick}>Yahoo</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default">Gmail</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default" >Outlook</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default" >Facebook</button></li>
          <li></li>
        </ul>
      </div>
    );
  }

}

一旦我像下面这样更改代码，错误就会得到修复。但随后出现错误， 未捕获的类型错误：无法读取 null 的属性“setState”

 import { Component, PropTypes } from 'react';
import { FetchDetails } from '../api_call/apis.js';

export default class FriendRight extends Component {

  getInitialState() {
    return {
      contacts: []
    }
  }

  handleClick() {
    FetchDetails().initialize().then(function(results) {
      this.setState({
        contacts: results.contact
      });
    }.bind(this));
  }

  render(){
    if(this.getInitialState.length > 0){
      var items = this.state.contacts.map(function(item){
        return <a href="#" className="list-group-item ">
          <h4 className="list-group-item-heading">{item.fullName}</h4>
        </a>;
      });
    }

    return(
      <div>
        <ul class="list-group">
          <li className="list-group-item"><button type="button" className="btn btn-default" onClick={this.handleClick}>Yahoo</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default">Gmail</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default" >Outlook</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default" >Facebook</button></li>
          <li>{this.getInitialState.length > 0 ? items : ""}</li>
        </ul>
      </div>
    );
  }

}

【问题讨论】：

只是确保：您是不是要在handleClick() 中执行contacts: results.contacts？我认为您只是缺少s
不，从api返回的数组是这样的。联系人：数组 [65] 0：对象电子邮件：“abcd@lilydigital.com”全名：“Nell Witowski”proto：对象 1：对象 2：对象 3：对象 4：对象 5：对象 6 : 对象 7：对象
@sameeradanthanarayana 试试onClick={this.handleClick.bind(this)} 而不是onClick={this.handleClick}

标签： javascript jquery reactjs es6-module-loader

【解决方案1】：

不要在 es6 类中使用 getInitialState()。要解决此问题，请在 constructor() 上初始化状态。

就像这样：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor() {
    this.state = {
      contacts: []
    };
  }

  render() {
    const { contacts } = this.state;

    return (
      <ul>
        {
          contacts.map((contact, key) => {
            return (<li key={ key }>{ contact.name }</li>);
          })
        }
      </ul>
    );
  }
}

export default MyComponent;

另一种处理方法是在render() 函数中使用一个简单的or 子句。你可以写成(contacts || []).map(() => {，而不是contacts.map(() => {。

【讨论】：