栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

React JS

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

React JS

.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: []};  },   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')    );  }})


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/366698.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号