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;

これを処理するもう 1 つの方法は、render()関数内の単純な or 句です。あなたの代わりにcontacts.map(() => {書くことができます(contacts || []).map(() => {。

于 2016-02-22T10:09:17.480 に答える