React中如何通过字符串名称获取数组内的导入对象？

这问题我之前做React项目时也踩过坑！你现在的核心问题是用数组存储分类对象，但数组是靠数字索引（0、1、2...）访问的，而你通过select拿到的是字符串'Sports'/'Kids'，用这个字符串当数组索引自然找不到对应对象，所以返回undefined。

最简单的解决方案：把categories从数组改成键值对对象 #

把原来的数组结构换成以字符串名称为键、对应对象为值的普通对象：

// 替换原来的数组定义
const categories = {
  Sports: Sports,
  Kids: Kids
};

这样之后，你在onChange事件里的代码就能正常工作了：

const category = e.currentTarget.value;
console.log(categories[category]); // 现在就能拿到对应的Sports/Kids对象啦

额外优化：避免维护两份分类数据 #

你现在单独维护了categoriesLoop数组来渲染select选项，其实可以直接从新的categories对象中提取键来生成，这样以后新增分类时只需要修改categories对象，不用同时改categoriesLoop，避免数据不一致：

// 自动生成选项所需的字符串数组
const categoriesLoop = Object.keys(categories);

然后渲染select的代码可以保持不变（记得加key属性哦，React列表渲染要求）：

categoriesLoop.map(category => <option key={category}>{category}</option>)

这样一套下来，既解决了字符串访问对象的问题，还减少了重复代码的维护成本~

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