React 选择框中的选项过滤器

Question

我有一个选择框，需要填写 6 个选项。例如，

<select
                  id="watchSize"
                  className="form-select"
                  aria-label="Watch Size"
                >
                  <option selected>{post.size}</option>
                  <option>Normal</option>
                  <option>Big</option>
                  <option>Small</option>
                </select>

如您所见，选择框中有 3 种不同的尺寸。所以我定义了这些尺寸硬编码，但我从 API 中获取手表的特定尺寸，类似于 {post.size}。所以，我想做的是如果 {post.size} 是小，我不想在选项中显示小，在这种情况下，值应该是 {post.size}。 我希望我很清楚。 有什么办法可以做到吗？

[![在此处输入图片描述][1]][1]

谢谢...

Answer 1

你可以试试这个。在这里，我采用了一系列尺寸并将选定的尺寸放在数组的前面，而 ​​Set 采用独特的项目来保持顺序。然后map函数返回所有的jsx。

<select
    id="watchSize"
    className="form-select"
    aria-label="Watch Size"
    >
    {[...new Set([post.size, "Normal", "Big", "Small"])].map(i => <option selected={i===post.size}>{i}</option>)}
</select>