选项未显示在 react-select 上

Question

我正在为选择字段使用react-select 。 当我使用法线map函数时，会显示选项，但如果我使用嵌套map函数，它不会列出选项。

这是我所做的

<Field
  name="subjects"
  label="Destination Subjects *"
  component={SelectField}
  isSearchable
  isMulti
  options={get(props, "destinations").map(destination => {
    return preferredDestination.map(pdes => {
      if (destination._id === pdes.name) {
        if (get(destination, "subjects").length > 0) {
          return get(destination, "subjects").map(
            (subject, idx) => {
              console.log("subject", subject); // it gets printed too
              return {
                name: subject.id,
                value: subject.val
              };
            }
          );
        } else {
          return [];
        }
      } else {
        return [];
      }
    });
  })}
/>

这没有列出任何选项，但我只想要基于某些条件的选项。

<Field
  name="subjects"
  label="Destination Subjects *"
  component={SelectField}
  isSearchable
  isMulti
  options={get(props, "destinations").map(destination => {
    return {
      name: destination.name,
      value: destination.value,
    }
  })}
/>

通过法线map功能，我的意思是说上面的代码。 这个有效，但这不是我想要的。 我希望这些项目作为与特定选定目的地的主题相匹配的选项，而不是所有目的地的主题。

我现在如何根据上述条件显示选项？

调试时我在选项中得到以下内容

这是我从 vijay 的解决方案中得到的截图

Answer 1

只需确保结果数组是一维的，并使用label作为名称和value作为值

这是代码

<Field
  name="subjects"
  label="Destination Subjects *"
  component={SelectField}
  isSearchable
  isMulti
  options={get(props, "destinations").map(destination => {
    // Don't use second map here 
    // if you're just trying to find the matching element
    // in the second array

    if (
       preferredDestination.findIndex(
        pdes => destination._id === pdes.name
       ) >= 0
    ) {
      if (get(destination, "subjects").length > 0) {
          return get(destination, "subjects").map(
            (subject) => {
              return {
                label: subject.id, // change it to label
                value: subject.val
              };
            }
          );
      }
    }
    // remove unwanted else block
    return null
    })
    .filter(x => x !== null) // remove null elements
    .reduce((a, c) => [...a, ...c], []) // this will convert the 2D array to 1D 
  }
/>