如何使用 Semantic UI React 将数据传递到 <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) => {&nbsp; value.forEach((app, index) => {&nbsp; &nbsp; appNames.push({&nbsp; &nbsp; &nbsp; &nbsp;key: index,&nbsp; &nbsp; &nbsp; &nbsp;text: app.appName,&nbsp; &nbsp; &nbsp; &nbsp;value: app.appName,&nbsp; &nbsp; });&nbsp; });});然后将 appNames 传递给选项。如果您不使用返回的数组，则无需使用“地图”。