如何在 React.js 中动态添加 SelectOption

Question

有一个列表 l:

l = [
 ["a","b"],
 ["c","d"]
]

我想用我写的这个列表动态地创建一个 SelectOption 字段：

            <Field
              name="successData.val"
              render={({ field: { name } }) => (
                <Column>
                  <Select
                    onChange={value => setFieldValue(name, value)}
                    placeholder="dummy"
                    width={300}
                  >
                    {l.forEach(key => (
                      <SelectOption
                        value={key[0]}
                        label={key[1]}
                      />
                    ))}
                  </Select>
                </Column>
              )}
            />

但是当我点击下拉按钮时，列表没有出现，只是框的上边界被突出显示，似乎下拉菜单正在生成，但不正确。

谁能建议这个实现中可能有什么问题？

Answer 1

使用map()

{l.map(key => (
  <SelectOption
    value={key[0]}
    label={key[1]}
  />
))}