使用map作为Html的select，选项时出错

falq053o 于 2023-04-27 发布在其他

关注(0)|答案(1)|浏览(103)

下面两个代码不是同一个代码吗？
但当使用Map我得到了这个错误caught TypeError: size.option.map is not a function

<select id="size">
          <option value="">--pleae choose a size--</option>
          <option value="">{size.option.small}</option>
          <option value="">{size.option.medium}</option>
          <option value="">{size.option.large}</option>
          <option value="">{size.option.xlarge}</option>
          <option value="">{size.option.xxlarge}</option>
        </select>

<select id="size">
          <option value="">--pleae choose a size--</option>
          {size.option.map((s) => (
            <option value={s}>{s}</option>
          ))}
        </select>

我的json

Html

来源：https://stackoverflow.com/questions/76083759/error-when-using-map-for-htmls-select-option

1条答案

按热度按时间

v7pvogib1#

size.option是一个对象，而不是一个数组，因此map方法是不可调用的。要迭代一个对象，你可以使用Object.keys/values/entries。例如：

<select id="size">
    <option value="">--pleae choose a size--</option>
    {Object.entries(size.option).map(([key, value]) => (
        <option key={key} value={key}>{value}</option>
    ))}
</select>

不要忘记在渲染数组时必须提供key属性。

赞(0）回复(0）举报 2023-04-27

我来回答

使用map作为Html的select，选项时出错

1条答案

相关问题

热门标签

最新问答