React JS中用map渲染数组值为select的option时出现空标签怎么解决？

问题原因 #

• 你定义的op数组不是React可响应的状态变量：如果op是组件内声明的普通变量，即使你通过循环完成了赋值操作，变量值的变化也不会触发React组件的重渲染，组件渲染阶段拿到的始终是op的初始值（通常是空数组），所以最终渲染出来的<select>没有子元素。
• 赋值逻辑执行时机问题：如果你的op赋值逻辑是在异步请求（比如获取response.data的接口回调）中执行，异步逻辑执行时间晚于组件首次渲染，若op不是响应式状态，渲染完成后视图也不会自动更新。

解决方法 #

1. 将op声明为响应式状态
   如果你使用的是函数组件，通过useState定义op：

import { useState } from 'react';

// 组件内部
const [op, setOp] = useState([]);

2. 拿到接口数据后，通过状态更新方法修改op，不要直接给数组下标赋值：

// 接口请求回调内
const totalPages = Math.ceil(response.data.length / end);
const newOp = [];
for (let i = 0; i < totalPages; i++) {
  newOp.push(i + 1);
}
setOp(newOp); // 调用状态更新方法触发组件重渲染，此时map逻辑会拿到最新的数组值

3. 可选优化：渲染前添加可选链判断，避免空数组调用方法报错：

<select>
  {op?.map(value => (<option key={value} value={value}>{value}</option>))}
</select>

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