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

Question

我正在使用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')
    );
  }
})

编辑:添加示例conversations.json

注意 - 调用this.props.data.conversations也会返回错误:

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

回报

window.foo

这是conversations.json:

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

Answer 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')
    );
  }
})

Answer 2

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

Answer 3

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

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

这种模式实际上在Facebook的ToDo演示应用程序中使用(请参阅"应用程序"部分),网址为https://facebook.github.io/react/.

Answer 4

我有同样的问题。解决方案是将 useState 初始状态值从字符串更改为数组。在 App.js 中，之前的 useState 是

const [favoriteFilms, setFavoriteFilms] = useState('');

我把它改为

const [favoriteFilms, setFavoriteFilms] = useState([]);

并且使用这些值的组件停止使用 .map 函数抛出错误。

Answer 5

发生这种情况是因为组件在异步数据到达之前渲染，您应该在渲染之前进行控制。

我是这样解决的：

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>
    );
}

• 当属性为空/未定义时，地图无法解析，所以我先做了一个控件

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

Answer 6

有时你只需要检查 api 调用是否有数据返回，

{this.props.data && (this.props.data).map(e => /* render data */)}

Answer 7

从 props 数据创建一个数组。

let data = Array.from(props.data)

然后你可以像这样使用它：

{ data.map((itm, index) => {
return (<span key={index}>{itm}</span>)
}}