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 上的选项和映射有关 - 但我不确定修复它的最佳方法。

我的第二个问题是...一旦创建了 selection，我该如何渲染组件？它将是多个 select，因此用户可以 select 尽可能多的选项。

在此先感谢您的帮助。

Answer 1

如果您需要过滤它们（您这样做是为了去除重复项），我建议记住反应选项 select。

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

你似乎还有一个大问题是你使用 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}        
/>)

这是一个 link 代码沙箱 Select 渲染。

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

React-Select 重复和用例

React-Select Duplicates and Use Case

javascript

reactjs

contentful

react-select