React JS - Uncaught TypeError：this.props.data.map不是函数

6 回答

• 1

  .map 函数仅在阵列上可用 .
  它看起来像 data 不是你期望它的格式（它是{}但你期待[]） .

  this.setState({data: data});
  

  应该

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

  检查要设置的“数据”类型，并确保它是一个数组 .

  修改了一些建议的代码（propType validation和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')
      );
    }
  })
  

  回复于 2024-05-18T22:25:22+08:00
• 79

  更一般地说，您还可以将新数据转换为数组并使用concat之类的内容：

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

  这种模式实际上用于Facebook的ToDo演示应用程序（请参阅"An Application"部分）https://facebook.github.io/react/ .

  回复于 2024-05-18T22:25:22+08:00
• 0

  对我有用的是使用 data = Array.from(props.data); 将props.data转换为数组然后我可以使用 data.map() 函数

  回复于 2024-05-18T22:25:22+08:00
• 8

  您不需要数组来执行此操作 .

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

  回复于 2024-05-18T22:25:22+08:00
• 7

  之所以发生这种情况是因为组件在异步数据到达之前呈现，您应该在呈现之前进行控制 .

  我用这种方式解决了这个问题：

  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时，Map无法解析，所以我先做了一个控件

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

  回复于 2024-05-18T22:25:22+08:00
• 0

  获取数据时尝试 componentDidMount() 生命周期

  回复于 2024-05-18T22:25:22+08:00