javascript - 选项未显示在 react 选择上

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 
  }
/>