Question

我正在使用数据对象来加快访问速度。要将数据呈现为列表，我使用的是lodash中的map函数。在函数内部我只有键和值可用。我希望显示当前项目的索引，因为我已经完成了这个this way。是否有不同/更好的方法来做到这一点？

代码段

＆＃13;

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'));

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果要根据对象的某些"key"创建对象的地图。您可以使用_.keyBy来自lodash。然后你将有一个对象，其中属性名称将是你的键，值将是你的完整对象。然后像这样newObject["some key"]

Answer 2

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'));将返回对象键的数组。为了达到同样的结果：

quill.on('text-change', (...args) => { ... })

Answer 3

您可以使用此

更改数据类型

   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>
        );
      })

https://jsfiddle.net/nandwana92/2a0p0e55/1/

Answer 4

您可以使用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>
    )
  })

应输出：

// index：0 key：拉贾斯坦邦价值：斋浦尔

Answer 5

另一种方法是使用ol。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        'Rajasthan': 'Jaipur',
        'Tamilnadu': 'Chennai',
        'Maharashtra': 'Mumbai' 
      }
    };
  }

  render() {
    let count = 0;

    return (
      <ol>
        {Object.entries(this.state.data).map(([key, value]) => <li>State: {key}, Capital: {value}</li>) }
      </ol>
    );
  }

}

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>

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

5 个答案: