Search code examples
reactjsreact-select

How to solve selectOptions.some is not a function while using AsyncCreatableSelect?


I am using AsyncCreatableSelect of react-select 2.0 to fetch the options from an API, but I am facing the following error as soon as I type something -

Creatable.js:126 Uncaught TypeError: selectOptions.some is not a function
    at isValidNewOption (Creatable.js:126)
    at Creatable.componentWillReceiveProps (Creatable.js:212)
    at callComponentWillReceiveProps (react-dom.development.js:13047)
    at updateClassInstance (react-dom.development.js:13260)
    at updateClassComponent (react-dom.development.js:14860)
    at beginWork (react-dom.development.js:15716)
    at performUnitOfWork (react-dom.development.js:18750)
    at workLoop (react-dom.development.js:18791)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:17998)
    at renderRoot (react-dom.development.js:18909)
    at performWorkOnRoot (react-dom.development.js:19812)
    at performWork (react-dom.development.js:19722)
    at performSyncWork (react-dom.development.js:19696)
    at requestWork (react-dom.development.js:19551)
    at scheduleWork (react-dom.development.js:19358)
    at Object.enqueueSetState (react-dom.development.js:12789)
    at Async.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:354)
    at Async.js:168

This is what my component looks like -

<AsyncCreatableSelect
                name="search"
                value={this.state.search}
                styles={customStyles}
                placeholder={this.props.position+". Add Skill"}
                loadOptions={this.getOptions}
                onChange={this.updateValue}
                />

and this is the function I am calling for loadOptions -

getOptions(searchTerm){

        return fetch(`https://api.stackexchange.com/2.2/tags?order=desc&sort=popular&inname=${searchTerm}&filter=default&site=stackoverflow`)
        .then(results=>{
            return results.json();
        }).then(data=>{
            let options=[]
            for(let i in data.items){
                options.push({
                    value:data.items[i].name,
                    label:data.items[i].name[0].toUpperCase()+data.items[i].name.substring(1).split('-').join(' ')
                })
            }
            //console.log(options)
            return {'options':options.slice(0,7)}
        })
}

Solution

  • I answered in the git repo as well, but will follow up here as well in case it helps anyone else.

    loadOptions is a function that passes two parameters: inputValue and callback. You need the second one to resolve the promise.

    getOptions(searchTerm, callback){
    
           ...
    
            //console.log(options) 
            callback(options.slice(0, 7));
      })
    }
    

    Please let me know if this helps.