react-select 上未显示选项

Question

我在 select 字段中使用 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 函数，我的意思是说上面的代码。这个有效，但这不是我想要的。我希望这些项目作为选项匹配特定 selected 目的地的主题，而不是所有目的地的主题。

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

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

这是我使用 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 
  }
/>

react-select 上未显示选项

options are not shown on react-select

javascript

reactjs

react-select