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

Question

我使用对象来存储数据以便更快地访问。为了将数据呈现为列表，我使用 lodash 中的 map 函数。在函数内部我只有可用的键和值。我希望显示当前项目的索引，为此我已经这样做了 this way 。有没有不同/更好的方法来做到这一点？

代码片段

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

  render() {
    let count = 0;

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

}

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

.widget {
  width: 202px;
  margin: 100px auto;
  //    border:1px solid black;
  padding: 20px;
}

.name {
  color: red;
}

.default-label {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 10px;
  width: 180px;
}

.green-label {
  border: 1px solid green;
  padding: 10px;
  margin-bottom: 10px;
  width: 180px;
}

.default-input {
  border: 1px solid #eaeaea;
  padding: 10px;
  width: 180px;
}

.important-input {
  border: 2px solid red;
  width: 180px;
}

img.center {
  width: 100px;
  height: 100px;
  display: block;
  margin: 15px auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

如果您想通过对象中的某些“key”创建对象的 map 。您可以使用 lodash 中的 _.keyBy 。然后你将拥有一个对象，其中属性名称将是你的键，值将是你的完整对象。然后像这样 newObject["some key"]