React JS - Uncaught TypeError: this.props.data.map не является функцией

112

Я работаю с reactjs и не могу предотвратить эту ошибку при попытке отобразить данные JSON (из файла или с сервера):

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

Я смотрел:

Код реакции выдает ошибку «TypeError: this.props.data.map не является функцией»

React.js this.props.data.map () не является функцией

Ни один из этих способов не помог мне решить проблему. После загрузки моей страницы я могу проверить, что this.data.props не является неопределенным (и имеет значение, эквивалентное объекту JSON - может вызывать с помощью window.foo), поэтому кажется, что он не загружается вовремя, когда он вызывается ConversationList. Как убедиться, что mapметод работает с данными JSON, а не с 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')
    );
  }
})

РЕДАКТИРОВАТЬ: добавление образца chatations.json

Примечание - вызов this.props.data.conversationsтакже возвращает ошибку:

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

возвращает следующую ошибку:

Uncaught TypeError: Невозможно прочитать карту свойства undefined

Вот chatations.json:

{"user_has_unread_messages":false,"unread_messages_count":0,"conversations":[{"id":18768,"last_message_snippet":"Lorem ipsum","other_user_id":10193}]}
javascript  ajax  json  reactjs 
— keypulsations
источник
Я обновил ответ. Также несколько рекомендаций: добавьте propTypes: {data: React.PropTypes.array} в ConversationList для проверки типа данных и добавьте componentWillUnmount: fn (), который "clearInterval" интервал в ConversationBox.
— user120242

Ответы:

136

.mapФункция доступна только на массиве.
Похоже, dataформат находится не в том формате, который вы ожидаете (это {}, но вы ожидаете []).

this.setState({data: data});

должно быть

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

Проверьте, какой тип «данных» установлен, и убедитесь, что это массив.

Модифицированный код с несколькими рекомендациями (проверка propType и 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')
    );
  }
})
— user120242
источник
33

что сработало для меня, так это преобразование props.data в массив, используя data = Array.from(props.data); тогда я мог бы использовать data.map()функцию

— Вишал Сешагири
источник
1
Мой тип уже был массивом, например, typeOf показывал правильную вещь, длина была правильной, но все же появлялась ошибка. Это исправило это для меня. Спасибо!
— user1829319
10

В более общем плане вы также можете преобразовать новые данные в массив и использовать что-то вроде concat: 

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

Этот шаблон фактически используется в демонстрационном приложении Facebook ToDo (см. Раздел «Приложение») по адресу https://facebook.github.io/react/ .

— Брессон
источник
1
Это изящный совет / уловка, но я хочу отметить, что это замаскирует реальную проблему и не решит OP. В случае OP это не поможет, поскольку данные все равно будут искажены (не то, что было задумано). Разговор, скорее всего, окажется пустым, поскольку все реквизиты будут нулевыми. Я бы рекомендовал не использовать этот совет, если вы не уверены, что ваши данные находятся в нужном вам формате, чтобы не столкнуться с неожиданным поведением, когда возвращенные данные не такие, как вы думали.
— user120242
1

Для этого вам не нужен массив. 

var ItemNode = this.state.data.map(function(itemData) {
return (
   <ComponentName title={itemData.title} key={itemData.id} number={itemData.id}/>
 );
});
— CodeGuru
источник
Чем отличается братан?
— Амар Патхак
1

Это происходит из-за того, что компонент визуализируется до прибытия асинхронных данных, вы должны контролировать его перед визуализацией.

Я решил это так: 

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>
    );
}
  • Карта не может разрешиться, если свойство равно null / undefined, поэтому сначала я сделал элемент управления

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

— JC
источник
0

Вам нужно преобразовать объект в массив, чтобы использовать mapфункцию:

const mad = Object.values(this.props.location.state);

где this.props.location.stateобъект, переданный в другой компонент.

— ИЗРАИЛЬ ОДУГУВА
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.