React中调用genres.map时报错map is not function是什么原因？

错误原因 #

map是JavaScript数组的专属方法，你接口返回的genres是普通对象，对象本身没有map方法，所以调用时会抛出类型错误。同时你初始化genres状态时指定了空数组作为初始值，接口返回后赋值为对象，二者类型不匹配，也存在类型隐患。

解决方法 #

你可以通过Object静态方法先把对象转为可遍历的数组，再调用map渲染下拉选项，根据你的业务需求可选择以下两种常用方案：

方案1：同时用对象的键和值（推荐）

你的数据中键是分类的英文标识，值是法语显示名，适合提交时传英文编码、前台显示法语的场景：

// 先把genres的初始值改为空对象，匹配接口返回类型
const [genres, setGenres] = useState({});

// 渲染部分，加上queryGenre的成功判断，避免请求未完成时渲染
{query.isSuccess && queryGenre.isSuccess && (
  <>
    <select name="genre">
      {Object.entries(genres).map(([genreKey, genreLabel]) => (
        <option key={genreKey} value={genreKey}>
          {genreLabel}
        </option>
      ))}
    </select>
    {/* 其他代码 */}
  </>
)}

方案2：仅使用对象的值

如果提交时直接传分类的法语名称，可以直接遍历对象的值：

<select name="genre">
  {Object.values(genres).map(genre => (
    <option key={genre} value={genre}>{genre}</option>
  ))}
</select>

额外注意点 #

• 遍历生成React列表元素必须添加唯一key属性，避免框架抛出渲染警告
• name属性只需挂载在select标签上，option标签用value属性存储待提交的值即可

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