反应-选择副本和用例

Question

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

背景:

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

这是我的代码contentful:

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 };
})}

/>

我的第一个问题是……当使用这个我得到重复弹出时，我只希望每个显示1。我附上了这个问题的一个例子。我知道这是与独立项目的选项和映射有关-但我不确定修复它的最佳方法。 我的第二个问题是……一旦选择完成，我该如何渲染组件?它将是多选的，所以用户可以选择尽可能多的选项。

提前感谢您的帮助。

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

这是一个带有选择渲染的代码沙箱链接。

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