Question

我在reactjs中订购对象键时遇到问题。我会从我的db：

创建一个像这样的选择

{
  liv_1:value,
  liv_2:value,
  liv_3:value,
  .
  . 
  .
  liv_10:value,
  liv_11:value 
}

所以我在我的组件中：

var selectLevel = 
        <select ref="level">
            <option value="" disabled>--Select level--</option>
            {
                Object.keys(objectLevel).map(function(el, k) {
                    return <option key={k}
                    value={el}>{el}</option>;
                })
            }
        </select>

但我的问题是订购，因为它重新排序了我的钥匙，如：

{
 liv_1:value,
 liv_10:value,
 liv_11:value,
 liv_2:value,
 liv_3:value,
 .
 .
 .
}

我怎样才能保留订单？

Answer 1

在映射之前添加sort的调用：

 Object.keys(objectLevel).sort().map(function(el, k) {
                    return (<option key={k}
                    value={el}>{el}</option>);
                })

Answer 2

您可以使用自定义比较器重新排序项目：

Object.keys(objectLevel)
  .sort((a,b) => +a.split('_')[1] - +b.split('_')[1])
  .map(function(el, k) {
      return <option key={k} value={el}>{el}</option>;
  })

选择Reactjs中的Order Object键

2 个答案: