React项目使用state数据填充select下拉框无渲染结果问题排查

核心问题1：对象遍历逻辑错误 #

你使用Object.keys(categories)拿到的是对象所有键名组成的字符串数组，比如你的categories结构为{ "1": {"category_id": 1, "name": "数码"}, "2": {"category_id":2, "name": "服装"} }，Object.keys返回的是['1', '2']，你直接遍历这个数组取category.category_id和category.name，相当于从字符串里取不存在的属性，自然拿不到值，渲染为空。

修复方法：遍历的时候通过键名取到对应的分类对象：

{Object.keys(categories).map((key) => {
  const category = categories[key]
  return <option key={category.category_id} value={category.category_id}>{category.name}</option>
})}

核心问题2：状态类型和接口返回不匹配（大概率隐含问题） #

如果你的接口返回的分类数据本身就是数组类型（[{category_id:1, name:"xx"}, ...]），那你初始把categories设为空对象{}本身就错了，调整如下即可：

1. 修改初始状态类型

const [categories, setCategories] = useState([]);

2. 直接遍历数组渲染选项

{categories.map((category) => (
  <option key={category.category_id} value={category.category_id}>{category.name}</option>
))}

其他注意事项 #

• React列表渲染必须给每个子项加唯一key属性，否则会抛出渲染警告
• 初始加载阶段可以加加载态判断，避免空状态下的显示异常

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