如何將數據傳遞到選項中<form.select></form.select>與語義 UI 反應？

Question

我有一個項目清單。 項目是從 API 動態獲取的，需要顯示在<select/>我正在使用語義 UI 反應組件。

options 接受 object 的形式： { key: "", text: "", value: "" }

這是表格：

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

這就是我嘗試過的：這里的 options 是響應，我將一個項目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 傳遞給選項。

如果您不使用返回的數組，則無需使用“地圖”。