Question

我有jsx类，我试图显示一些从API调用中恢复的联系人数据但是一旦我添加了 this.state.contacts.map 函数，它就会给我一个错误，说 TypeError：无法读取属性＆＃39;联系人＆＃39;为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>
    );
  }

}

一旦我更改了下面的代码，那么错误就得到了解决。但后来有错误， 未捕获的TypeError：无法读取属性＆＃39; setState＆＃39;为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>
    );
  }

}

Answer 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()函数中的simple或子句。您可以写contacts.map(() => {而不是(contacts || []).map(() => {。

错误：React JS无法读取属性

1 个答案: