Question

我是ReactJS的初学者，我一直想弄清楚为什么地图一次只能返回一个道具。

在file1.jsx中，我有一个包含3个对象的数组：

var MainPanelOneData = [{"id":1,"shotviews":15080},{"id":2,"likes":12000},{"id":3,"comments":5100}];

File1.jsx还有一个渲染函数来推断数组中的数据：

render: function() {
    var ListMainPanelOne = MainPanelOneData.map(function(data) {
        return <MainPanelOne key={data.key} shotviews={data.shotviews} likes={data.likes} comments={data.comments} />
});

在file2.jsx中，我有这个代码来从file1.jsx渲染数据对象：

render: function() {

    return (
      <div>
      <span>{this.props.shotviews} shot views</span>
      <span>{this.props.likes} likes</span>
      <span>{this.props.comments} comments</span>
      </div>
    )
  }

结果显示：

15080 shot views likes comments
shot views12000 likes comments
shot views likes5100 comments

我猜它会像这样重复，因为它一次只搜索一个键？如果是这种情况，我如何同时显示所有键？使用索引？

Answer 1

你的数据数组没有所有的密钥。 PanelOneData中的每个对象都有一个密钥，而其他两个密钥缺少;另外，他们都没有名为key的密钥。所以你要制作三个MainPanelOne个组件，每个组件都有一个道具。该地图的结果是这个

[
  <MainPanelOne key={null} shotviews={15080} likes={null} comments={null} />,
  <MainPanelOne key={null} shotviews={null} likes={12000} comments={null} />,
  <MainPanelOne key={null} shotviews={null} likes={null} comments={5100} />
]

准确显示您所看到的内容

Answer 2

要获得一行，你可能会做这样的事情。

＆＃13;

render: function() {
    var ListMainPanelOne = MainPanelOneData.map(function(data) {
        return <span key={data.id}> {data.shotviews} {data.likes} {data.comments} </span>
});

＆＃13;

ReactJS - 一次列出所有密钥

2 个答案: