如何使用 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) => {

  value.forEach((app, index) => {

    appNames.push({

       key: index,

       text: app.appName,

       value: app.appName,

    });

  });

});

然后将 appNames 传递给选项。

如果您不使用返回的数组，则无需使用“地图”。