如何使用语义 UI React 将数据传递到 <Form.Select> </Form.Select> 中的选项？

Question

我有一个物品清单。项目是从 API 中动态获取的，需要在 <select/> 中显示我正在使用语义-ui 反应组件。

options 接受以下形式的对象： { key: "", text: "", value: "" }

这是表格：

<Form size="large">
  <Form.Select
    fluid
    label="Application Name"
    name="appName"
    onChange={(event) => fetchHandler(event)}
    options={} --> Item to be passed
  />
</Form>

这是我尝试过的：这里的选项是响应，我正在将项目 appName 添加到列表 appNames.

let appNames = [];
options.map((value) => {
  value.map((app) => {
    return appNames.push(app.appName);
  });
});

const appNameHandler = () => {
  let appOptions = [
    {
      key: '',
      text: '',
      value: '',
    },
  ];
  for (let key = 0; key >= appNames.length; key++) {
    appOptions.push(...appNames, {
      key: key,
      text: appNames,
      value: appNames,
    });
  }
  console.log(appOptions);
  return appOptions;
};

是否有更好的解决方法？

Answer 1

有点难以分辨你在做什么，但我会这样做

const appNames = [];
options.forEach((value) => {
  value.forEach((app, index) => {
    appNames.push({
       key: index,
       text: app.appName,
       value: app.appName,
    });
  });
});

然后将 appNames 传递给选项。

如果您不使用返回的数组，则无需使用 'map'。

如何使用语义 UI React 将数据传递到 <Form.Select> </Form.Select> 中的选项？

How to pass data into options in <Form.Select> </Form.Select> with Semantic UI React?

javascript

reactjs

semantic-ui-react