React-Select 重复项和用例

Question

我正在使用 react-select 来帮助为我的网站创建过滤系统。但是，我目前有一些问题。

背景：

• 我正在从 Contentful API 检索数据
• 使用 Next js
• 使用 getStaticProps

这是我的内容代码：

export async function getStaticProps() {
  const client = createClient({
    space: process.env.TOKEN,
    accessToken: process.env.TOKEN,
  });

  const res = await client.getEntries({
    content_type: "indieProjects",
  });

  return {
    props: {
      indieProjects: res.items,
    },
  };
}

这是我的 React-select 代码

 <Select
   isMulti
   placeholder="Search..."
   options={indieProjects.map((items) => {
     return { label: items.fields.type, label: items.fields.type };
   })}
            
/>

我的第一个问题是.. 使用它时，当我只想显示其中的一个时，我会弹出重复项。 I have attached an example of the issue 。我知道这与 indieProjects 上的选项和映射有关 - 但我不确定修复它的最佳方法。

我的第二个问题是……一旦做出选择，我该如何渲染组件？它将是多选的，因此用户可以选择尽可能多的选项。

提前感谢您的帮助。

Answer 1

如果您需要过滤它们，我建议记住 React select 的选项（您这样做是为了摆脱重复项。）

这样的事情应该可以解决您的第一个问题。对于第二个问题，您应该添加一个 onChange 函数并为您的 Select 分配一个值。我建议为此使用 useState 。 （使用 state 还可以让您访问他们选择的值）

您似乎还有一个大问题是您使用label 和label 而不是label 和value 作为您的选项对象。

const [state,setState] = useState([])
const options = useMemo(
  () =>
    ([...new Set(indieProjects.map(item=>item.fields.type))]).map((type) => {
      return { label: type, value: type };
    }),
  [indieProjects]
);
return (
 <Select
   isMulti
   onChange={(e)=> e && setState(e)}
   value={state}
   placeholder="Search..."
   options={options}        
/>)

这里是带有 Select 渲染的代码沙箱的链接。

https://codesandbox.io/s/dreamy-leftpad-l2pzq?file=/src/App.js