0

我有 jsx 类，我正在尝试显示一些从 API 调用中检索的联系人数据，但是一旦我添加了this.state.contacts.map函数，它就会给我一个错误，说TypeError: Cannot read property 'contacts' of 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>
    );
  }

}

一旦我像下面这样更改代码，错误就会得到修复。但随后出现错误， Uncaught TypeError: Cannot read property 'setState' of 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(){
    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>
    );
  }

}
4

1 回答 1

0

不要getInitialState()在 es6 类中使用。要解决此问题，请在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(() => {.

于 2016-02-22T10:09:17.480 回答