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

Question

这是我在组件中的代码。我最终想要做的是建立一个选择，其中的选项是返回的朋友列表

/*** @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

您需要在map 中添加一个return：

        <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"
    ]
  },