JSX中如何从索引2开始遍历数组渲染select下拉选项？

你可以通过两种方式实现只从索引2开始渲染选项：

方法一：在map中添加条件判断 #

直接在map回调里判断当前索引是否大于等于2，只有满足条件时才渲染<option>元素：

<select 
  defaultValue={'DEFAULT'}
  onChange={(e) => handlerPresentationSelected(e)}
  className="border-solid border-2 border-slate-200 w-full p-2"
>
  <option value="DEFAULT" disabled>Seleccione</option>
  {[...Array(51)].map((value, index) => {
    // 只渲染索引>=2的选项
    if (index >= 2) {
      return (
        <option 
          key={index} 
          value={index}>
            { index }
        </option>
      )
    }
    return null; // 不满足条件时返回null，不渲染内容
  })}
</select>

方法二：先截取数组再映射 #

先对生成的数组做slice(2)操作，截取从索引2到末尾的子数组，再进行映射。注意此时新数组的索引从0开始，需要还原原数组的索引值（新索引+2）：

<select 
  defaultValue={'DEFAULT'}
  onChange={(e) => handlerPresentationSelected(e)}
  className="border-solid border-2 border-slate-200 w-full p-2"
>
  <option value="DEFAULT" disabled>Seleccione</option>
  {[...Array(51)].slice(2).map((value, newIndex) => {
    const originalIndex = newIndex + 2; // 还原原数组的索引
    return (
      <option 
        key={originalIndex} 
        value={originalIndex}>
          { originalIndex }
      </option>
    )
  })}
</select>

两种方法都能满足需求：第一种逻辑直观，无需调整索引；第二种通过数组截取减少了循环内的判断操作，适合数据量较大的场景。

内容的提问来源于stack exchange，提问作者OscarDev