Javascript 在JSX中循环对象时如何获取索引？

我使用对象来获取数据，以便更快地访问。为了将数据呈现为列表，我正在使用lodash中的map函数。在函数内部，我只有键和值可用。我希望显示当前项目的索引，因为我已经这样做了。有没有其他/更好的方法

代码片段

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 数据：{ “拉贾斯坦邦”：“斋浦尔”， "泰米尔纳德邦":"钦奈",， “马哈拉施特拉邦”：“孟买” } }; } render（）{ 让计数=0； 返回( { _.map（this.state.data，（值、键、列表、索引）=>{ 返回( {++count}。状态：{key}，大写：{value} ); }) } ); } } React.render（，document.getElementById（'container'）

.widget{
宽度：202px；
保证金：100像素自动；
//边框：1px纯黑；
填充：20px；
}
.姓名{
颜色：红色；
}
.默认标签{
边框：1px纯黑；
填充：10px；
边缘底部：10px；
宽度：180px；
}
.绿色标签{
边框：1px纯绿色；
填充：10px；
边缘底部：10px；
宽度：180px；
}
.默认输入{
边框：1px实心#eaeaea；
填充：10px；
宽度：180px；
}
.重要投入{
边框：2倍纯红；
宽度：180px；
}
模拟中心{
宽度：100px；
高度：100px；
显示：块；
利润率：15px自动；
}

如果您想通过对象的某个

键创建对象的地图。您可以使用lodash中的
\uu0.keyBy
。然后您将拥有一个对象，其中属性名将是键，值将是完整对象。如果您想通过对象中的某个
“键”
来创建对象的映射，请像这样使用它。您可以使用lodash中的
\uu0.keyBy
。然后您将拥有一个对象，其中属性名将是键，值将是完整对象。然后像这样看待它
newObject[“some key”]
Lodash提供了一个经过战斗测试的高效方法实现，用于迭代集合（数组和对象）。然而，若您想使用普通Javascript，可以使用返回对象键数组的
Object.keys（yourObject）
。为了达到同样的效果：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        'Rajasthan': 'Jaipur',
        'Tamilnadu': 'Chennai',
        'Maharashtra': 'Mumbai'
      }
    };
  }

  render() {
    let count = 0;

    return (
      <div>
        {
          Object.keys(this.state.data).forEach(key => {
            return (
              <div><span>{++count}.</span><span>State: {key}, Capital: {this.state.data[key]}</span></div>
            )
          })
        }
      </div>
    );
  }

}

React.render(<MyComponent />, document.getElementById('container'));

类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：{
“拉贾斯坦邦”：“斋浦尔”，
"泰米尔纳德邦":"钦奈",，
“马哈拉施特拉邦”：“孟买”
}
};
}
render（）{
让计数=0；
返回(
{
Object.keys（this.state.data）.forEach（key=>{
返回(
{++count}.State:{key}，大写：{this.State.data[key]}
)
})
}
);
}
}
React.render（，document.getElementById（'container'）；

Lodash为迭代集合（数组和对象）提供了一种经过战斗测试的高效方法实现。然而，若您想使用普通Javascript，可以使用返回对象键数组的

Object.keys（yourObject）

。为了达到同样的效果：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        'Rajasthan': 'Jaipur',
        'Tamilnadu': 'Chennai',
        'Maharashtra': 'Mumbai'
      }
    };
  }

  render() {
    let count = 0;

    return (
      <div>
        {
          Object.keys(this.state.data).forEach(key => {
            return (
              <div><span>{++count}.</span><span>State: {key}, Capital: {this.state.data[key]}</span></div>
            )
          })
        }
      </div>
    );
  }

}

React.render(<MyComponent />, document.getElementById('container'));

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 数据：{ “拉贾斯坦邦”：“斋浦尔”， "泰米尔纳德邦":"钦奈",， “马哈拉施特拉邦”：“孟买” } }; } render（）{ 让计数=0； 返回( { Object.keys（this.state.data）.forEach（key=>{ 返回( {++count}.State:{key}，大写：{this.State.data[key]} ) }) } ); } } React.render（，document.getElementById（'container'）；

---

您可以使用此选项更改数据类型

   constructor(props) {
    super(props);
    this.state = {
     data: [{
    key: 'Rajasthan',
    value: 'Jaipur'
  },
  {
    key: 'Tamilnadu',
    value: 'Chennai',
  },
  {
    key: 'Maharashtra',
    value: 'Mumbai',
  }
    ]
    };

你可以很容易地组织起来

   this.state.data.map((item,index) => {
        return (
          <div><span>{index}</span><span>State: {item.key}, Capital: {item.value}</span></div>
        );
      })

this.state.data.map（（项目，索引）=>{
返回(
{index}状态：{item.key}，大写：{item.value}
);
})

---

您可以使用此选项更改数据类型

   constructor(props) {
    super(props);
    this.state = {
     data: [{
    key: 'Rajasthan',
    value: 'Jaipur'
  },
  {
    key: 'Tamilnadu',
    value: 'Chennai',
  },
  {
    key: 'Maharashtra',
    value: 'Mumbai',
  }
    ]
    };

你可以很容易地组织起来

   this.state.data.map((item,index) => {
        return (
          <div><span>{index}</span><span>State: {item.key}, Capital: {item.value}</span></div>
        );
      })

this.state.data.map（（项目，索引）=>{
返回(
{index}状态：{item.key}，大写：{item.value}
);
})

---

您可以使用

Object.keys

来获取数据键并像这样循环：

  Object.keys(this.state.data).map((val, index) => {
    return (
        <p key={this.state.data[val]}>
        {'index: ' + index} {'key: ' + val + ' ' + ' Value: '  + this.state.data[val]}
      </p>
    )
  })

Object.keys（this.state.data）.map（（val，index）=>{
返回(

{'index:'+index}{'key:'+val+'+'值：'+this.state.data[val]}

)
})

应输出：

---

//索引：0键：拉贾斯坦邦值：斋浦尔

您可以使用

Object.keys

来获取数据键并像这样循环：

  Object.keys(this.state.data).map((val, index) => {
    return (
        <p key={this.state.data[val]}>
        {'index: ' + index} {'key: ' + val + ' ' + ' Value: '  + this.state.data[val]}
      </p>
    )
  })

Object.keys（this.state.data）.map（（val，index）=>{
返回(

{'index:'+index}{'key:'+val+'+'值：'+this.state.data[val]}

)
})

应输出：

---

//索引：0键：拉贾斯坦邦值：斋浦尔

另一种方法，使用

ol

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 数据：{ “拉贾斯坦邦”：“斋浦尔”， "泰米尔纳德邦":"钦奈",， “马哈拉施特拉邦”：“孟买” } }; } render（）{ 让计数=0； 返回( {Object.entries（this.state.data）.map（[key，value]）=>

状态：{key}，大写：{value}

）} ); } } React.render（，document.getElementById（'container'）

.widget{
宽度：202px；
保证金：100像素自动；
//边框：1px纯黑；
填充：20px；
}
.姓名{
颜色：红色；
}
.默认标签{
边框：1px纯黑；
填充：10px；
边缘底部：10px；
宽度：180px；
}
.绿色标签{
边框：1px纯绿色；
衬垫