ReactJS 不能使用 map() 显示对象属性

Question

这是我组件中的代码。我最终想做的是构建一个 select，选项是从

返回的朋友列表

/*** @jsx React.DOM */

var FriendSelect = React.createClass({
 getInitialState: function(){
  return {
   friends: []
  };
 },
 componentDidMount: function(){
  this.loadFriends();
 },
 loadFriends: function (){
  
  $.ajax({
         async: true,
         type: "GET",
         url: "../../Messaging/_GetFriends",
         success: function (data) {
          this.setState({ friends: data });
          console.log("data in ajax: ",data);
         }.bind(this)
     });
     
 },
 handleSelections: function  (){
  console.log('selection changed');
 },
 render: function(){

     console.log('this.state.friends', this.state.friends);

  return (
   <div>
    {this.state.friends.map(function(friend){
     <span>{friend.text}</span>
    })}
   </div>
  );
 }
});

React.render(<FriendSelect />, document.getElementById('friendSelection'));

这是 ajax 调用后返回的 json。

[{"id":"8qdzmV","text":"fernando roman","firstName":"first","lastName":"last","pictureName":"00000000-0000-0000-0000-000000000000","pictureExt":".jpg"},{"id":"8qdzmV","text":"Anthony Macias","firstName":"first2","lastName":"last2","pictureName":"00000000-0000-0000-0000-000000000000","pictureExt":".jpg"},{"id":"8qdzmV","text":"Carla Velasco ","firstName":"first3","lastName":"last3","pictureName":"011ab238-0b3a-44ff-aeda-02e6fbdcca56","pictureExt":".jpg"}]

渲染组件时我没有收到任何错误，问题是每个朋友的文本属性没有被渲染。

Answer 1

你需要 return 里面 map:

        <div>
            {this.state.friends.map(function(friend){
                return <span>{friend.text}</span>
            })}
        </div>

JSX 没有输出的副作用 - 它只是评估一个可以返回的元素。

如果启用 es6 转译，您可以避免这种情况：

<div>{
    this.state.friends.map(friend => <span>{friend.text}</span>)
}</div>

您可以使用 browserify/reactify 并修改您的 package.json:

  "browserify": {
    "transform": [
      [
        "reactify",
        {
          "es6": true
        }
      ],
      "envify"
    ]
  },

ReactJS 不能使用 map() 显示对象属性

ReactJS cannot have object properties displayed using map()

reactjs

reactjs.net