web-dev-qa-db-fra.com

React JS - Uncaught TypeError: this.props.data.map n'est pas une fonction

Je travaille avec reactjs et n'arrive pas à empêcher cette erreur lorsque je tente d'afficher des données JSON (à partir d'un fichier ou d'un serveur):

Uncaught TypeError: this.props.data.map is not a function

J'ai regardé:

Code de réaction générant «TypeError: this.props.data.map n'est pas une fonction»

React.js this.props.data.map () n'est pas une fonction

Aucune de ces solutions ne m'a aidé à résoudre le problème. Après le chargement de ma page, je peux vérifier que this.data.props n’est pas indéfini (et a une valeur équivalente à l’objet json - peut appeler avec window.foo), il semble donc qu’il ne se charge pas à l’heure où il est appelé. par ConversationList. Comment puis-je m'assurer que la méthode map fonctionne sur les données json et non sur une variable undefined?

var converter = new Showdown.converter();

var Conversation = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="conversation panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">
            {this.props.id}
            {this.props.last_message_snippet}
            {this.props.other_user_id}
          </h3>
        </div>
        <div className="panel-body">
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        </div>
      </div>
    );
  }
});

var ConversationList = React.createClass({
  render: function() {

    window.foo            = this.props.data;
    var conversationNodes = this.props.data.map(function(conversation, index) {

      return (
        <Conversation id={conversation.id} key={index}>
          last_message_snippet={conversation.last_message_snippet}
          other_user_id={conversation.other_user_id}
        </Conversation>
      );
    });

    return (
      <div className="conversationList">
        {conversationNodes}
      </div>
    );
  }
});

var ConversationBox = React.createClass({
  loadConversationsFromServer: function() {
    return $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadConversationsFromServer();
    setInterval(this.loadConversationsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="conversationBox">
        <h1>Conversations</h1>
        <ConversationList data={this.state.data} />
      </div>
    );
  }
});

$(document).on("page:change", function() {
  var $content = $("#content");
  if ($content.length > 0) {
    React.render(
      <ConversationBox url="/conversations.json" pollInterval={20000} />,
      document.getElementById('content')
    );
  }
})

EDIT: ajout d'un échantillon de conversations.json

Remarque: l'appel de this.props.data.conversations renvoie également une erreur:

var conversationNodes = this.props.data.conversations.map...

résultats 

Uncaught TypeError: Cannot read property 'map' of undefined

Voici conversations.json:

{"user_has_unread_messages": false, "unread_messages_count": 0, "conversations": [{"id": 18768, "last_message_snippet": "Lorem ipsum", "other_user_id": 10193}]

javascriptajaxjsonreactjs
61
keypulsations

La fonction .map est uniquement disponible sur le tableau.
Il semble que data ne soit pas dans le format que vous attendez (il est {} mais vous attendez []).

this.setState({data: data});

devrait être

this.setState({data: data.conversations});

Vérifiez le type de "données" défini et assurez-vous qu'il s'agit d'un tableau.

Code modifié avec quelques recommandations (validation propType et clearInterval):

var converter = new Showdown.converter();

var Conversation = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="conversation panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">
            {this.props.id}
            {this.props.last_message_snippet}
            {this.props.other_user_id}
          </h3>
        </div>
        <div className="panel-body">
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        </div>
      </div>
    );
  }
});

var ConversationList = React.createClass({
 // Make sure this.props.data is an array
  propTypes: {
    data: React.PropTypes.array.isRequired
  },
  render: function() {

    window.foo            = this.props.data;
    var conversationNodes = this.props.data.map(function(conversation, index) {

      return (
        <Conversation id={conversation.id} key={index}>
          last_message_snippet={conversation.last_message_snippet}
          other_user_id={conversation.other_user_id}
        </Conversation>
      );
    });

    return (
      <div className="conversationList">
        {conversationNodes}
      </div>
    );
  }
});

var ConversationBox = React.createClass({
  loadConversationsFromServer: function() {
    return $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data.conversations});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },

 /* Taken from 
    https://facebook.github.io/react/docs/reusable-components.html#mixins
    clears all intervals after component is unmounted
  */
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.Push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  },

  componentDidMount: function() {
    this.loadConversationsFromServer();
    this.setInterval(this.loadConversationsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="conversationBox">
        <h1>Conversations</h1>
        <ConversationList data={this.state.data} />
      </div>
    );
  }
});

$(document).on("page:change", function() {
  var $content = $("#content");
  if ($content.length > 0) {
    React.render(
      <ConversationBox url="/conversations.json" pollInterval={20000} />,
      document.getElementById('content')
    );
  }
})
82
user120242

ce qui a fonctionné pour moi est de convertir les props.data en un tableau utilisant data = Array.from(props.data); Je pourrais alors utiliser la fonction data.map() 

10
Vishal Seshagiri

Plus généralement, vous pouvez également convertir les nouvelles données en un tableau et utiliser quelque chose comme concat: 

var newData = this.state.data.concat([data]);  
this.setState({data: newData})

Ce modèle est en fait utilisé dans l'application de démonstration ToDo de Facebook (voir la section "Une application") à https://facebook.github.io/react/ . 

8
bresson

Cela se produit parce que le composant est rendu avant l'arrivée des données asynchrones, vous devez contrôler avant d'effectuer le rendu.

Je l'ai résolu de cette façon: 

render() {
    let partners = this.props && this.props.partners.length > 0 ?
        this.props.partners.map(p=>
            <li className = "partners" key={p.id}>
                <img src={p.img} alt={p.name}/> {p.name} </li>
        ) : <span></span>;

    return (
        <div>
            <ul>{partners}</ul>
        </div>
    );
}
  • La carte ne peut pas être résolue lorsque la propriété est null/indéfinie. J'ai donc d'abord effectué un contrôle. 

this.props && this.props.partners.length > 0 ?

1
J C

Vous n'avez pas besoin d'un tableau pour le faire. 

var ItemNode = this.state.data.map(function(itemData) {
return (
   <ComponentName title={itemData.title} key={itemData.id} number={itemData.id}/>
 );
});
1
CodeGuru

essayez componentDidMount() cycle de vie lors de la récupération des données

0
Arif Ramadhani