未捕获的类型错误：无法使用“in”运算符在孟买搜索“选项”

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

如何将我的数组作为反应选择中的选项发送

Answer 1

React Select 期望选项以以下格式作为对象数组传递：

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

因此，您应该将位置作为对象数组传递给optionsReact-Select 的 prop，select如下所示：

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

参考： https: //react-select.com/home#getting-started

代码沙盒链接https://codesandbox.io/s/pb4r2s?module=/example.tsx