选择“Reactjs”中的“排序对象”键

Question

我在reactjs中对对象键进行排序时遇到问题。我会从我的数据库中创建一个这样的从对象中选择：

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