未捕获类型错误：无法使用'in'运算符在孟买搜索'options'

Question

我有一个由数组形式的数据组成的位置数组:

const locations = ['Mumbai', 'tuljapur', 'Bhagalpur', 'North East', 'Bongaigaon', 'South District', 'Pune', 'Cuttack', 'amritsar', 'East Godavari', 'Chandigarh']

当我将这个数组传递给react-select作为选项道具时。它给出以下错误:

ScrollManager.tsx:48 Uncaught TypeError: Cannot use 'in' operator to search for 'options' in Mumbai
at ScrollManager.tsx:48:1
at Array.map (<anonymous>)
at buildCategorizedOptions (ScrollManager.tsx:48:1)
at Select._this.buildCategorizedOptions (ScrollManager.tsx:48:1)
at Select._this.buildFocusableOptions (ScrollManager.tsx:48:1)
at Select.openMenu (ScrollManager.tsx:48:1)
at Select._this.onInputFocus (ScrollManager.tsx:48:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
at invokeGuardedCallback (react-dom.development.js:4274:1)

这是React的Select组件:

<Select
className="ml-4 mb-4 w-[180px]"
placeholder="School Name"
// isClearable={true}
options={locations}
name={"class"}
// value={selectedFilters.status}
/>

如何将数组作为选项发送到react-select

Answer 1

React Select期望以这种格式的对象数组传递选项:

{ value: 'value here', label: 'Label here' }

因此，您应该将位置作为对象数组传递给React-Selectselect的optionsprop:

[
{  label: "Mumbai", value: "Mumbai" },
{  label: "tuljapur", value: "tuljapur" },
....
]

参考:https://react-select.com/home开始

Code Sandbox link https://codesandbox.io/s/pb4r2s?module=/example.tsx