[英]react-select error: str.replace is not a function error
I am trying to implement react-select in my project.我正在尝试在我的项目中实现 react-select。 My code is here: https://gist.github.com/BikalNepal/9172b3161abfa545cc5748055c6584c6
我的代码在这里: https : //gist.github.com/BikalNepal/9172b3161abfa545cc5748055c6584c6
The data for search is being fetched using graphql and relay from a backend nodejs server, when I type into the box, it fetches the data properly but when I click on the data, I get the following errors:搜索数据是使用graphql从后端nodejs服务器中获取和中继的,当我在框中输入时,它会正确获取数据,但是当我单击数据时,出现以下错误:
Option selected: {value: "stark@gmail.com", label: "rickon"}// Selected data is okay
Error:
react-select.esm.js?acac:1224 Uncaught TypeError: str.replace is not a function
at trimString (react-select.esm.js?acac:1224)
at Object.eval [as filterOption] (react-select.esm.js?acac:1246)
at Select.filterOption (react-select.esm.js?acac:3952)
at toOption (react-select.esm.js?acac:4038)
at options.reduce.render (react-select.esm.js?acac:4092)
at Array.reduce (<anonymous>)
at Select.buildMenuOptions (react-select.esm.js?acac:4071)
at Select.componentWillReceiveProps (react-select.esm.js?acac:3575)
at callComponentWillReceiveProps (react-dom.development.js?cada:11395)
at updateClassInstance (react-dom.development.js?cada:11605)
trimString @ react-select.esm.js?acac:1224
(anonymous) @ react-select.esm.js?acac:1246
filterOption @ react-select.esm.js?acac:3952
toOption @ react-select.esm.js?acac:4038
options.reduce.render @ react-select.esm.js?acac:4092
buildMenuOptions @ react-select.esm.js?acac:4071
componentWillReceiveProps @ react-select.esm.js?acac:3575
callComponentWillReceiveProps @ react-dom.development.js?cada:11395
updateClassInstance @ react-dom.development.js?cada:11605
updateClassComponent @ react-dom.development.js?cada:14648
beginWork @ react-dom.development.js?cada:15598
performUnitOfWork @ react-dom.development.js?cada:19266
workLoop @ react-dom.development.js?cada:19306
callCallback @ react-dom.development.js?cada:149
invokeGuardedCallbackDev @ react-dom.development.js?cada:199
invokeGuardedCallback @ react-dom.development.js?cada:256
replayUnitOfWork @ react-dom.development.js?cada:18532
renderRoot @ react-dom.development.js?cada:19422
performWorkOnRoot @ react-dom.development.js?cada:20296
performWork @ react-dom.development.js?cada:20208
performSyncWork @ react-dom.development.js?cada:20182
interactiveUpdates$1 @ react-dom.development.js?cada:20449
interactiveUpdates @ react-dom.development.js?cada:2170
dispatchInteractiveEvent @ react-dom.development.js?cada:4882
react-dom.development.js?cada:17071
The above error occurred in the <Select> component:
in Select (created by StateManager)
in StateManager (created by CustomerSearch)
in div (created by FormGroup)
in FormGroup (created by CustomerSearch)
in div (created by Col)
in Col (created by CustomerSearch)
in div (created by CustomerSearch)
in CustomerSearch (created by Relay(CustomerSearch))
in Relay(CustomerSearch) (created by ReactRelayQueryRenderer)
in ReactRelayQueryRenderer (created by CustomerSearchPage)
in div (created by CustomerSearchPage)
in div (created by CustomerSearchPage)
in CustomerSearchPage (created by ProductPerformance)
in div (created by Row)
in Row (created by ProductPerformance)
in div (created by Container)
in Container (created by ProductPerformance)
in div (created by ProductPerformance)
in ProductPerformance (created by Relay(ProductPerformance))
in Relay(ProductPerformance) (created by ReactRelayQueryRenderer)
in ReactRelayQueryRenderer (created by ProductPerformancePage)
in div (created by ProductPerformancePage)
in div (created by ProductPerformancePage)
in ProductPerformancePage (created by Route)
in Route (created by RoutePage)
in div (created by RoutePage)
in Router (created by HashRouter)
in HashRouter (created by RoutePage)
in RoutePage (created by App)
in div (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
What could be the issue here?这里可能是什么问题?
Here you're making a reference to an event
constant that you never declare.在这里,您正在引用您从未声明的
event
常量。 Below your code fixed.在您的代码下方已修复。 See on props
onInputChange
and onKeyDown
you have to call event
before sending it.在道具
onInputChange
和onKeyDown
上查看您必须在发送之前调用event
。
<Select
value={selectedOption}
onChange={this.handleChange}
options={this.state.options}
// onKeyDown={event => this.handleRefetch(event)}
onInputChange={event => this.handleInput(event)}
inputValue={this.state.value}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.