我正在尝试在React Rails应用程序中构建一个搜索过滤器，该过滤器将在用户键入/搜索时过滤搜索结果。我正在跟踪walkthrough可以帮助解决此问题，但遇到一个错误，该错误使我停留了几个小时。
首先，这是我的错误：
['add', '$s2', '$s0', '$s1']
这是我的data_orange <- data.frame("Y" = c(0.16,0.10,0.05,0,0.),
"X" = c(2000,2001,2002,2003,2004,2005))
data_light_blue <- data.frame("Y" = c(0.17,0.16,0.14,0.13,0.12),
"X" = c(2000,2001,2002,2003,2004,2005))
data_blue <- data.frame("Y" = c(0.00,0.01,0.04,0.08,0.12),
"X" = c(2000,2001,2002,2003,2004,2005))
data_red <- data.frame("Y" = c(0.36,0.32,0.26,0.19,0.09),
"X" = c(2000,2001,2002,2003,2004,2005))
组件代码：
Uncaught TypeError: Cannot read property 'map' of undefined
at SearchFilter.render (SearchFilter.js:28)
现在，据我的理解，这是因为我们正在SearchFilter.js上调用import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class SearchFilter extends Component {
constructor(props) {
super(props)
this.state = {
term: '',
autoCompleteResults: [],
itemSelected: {},
showItemSelected: false
}
fetch('/search?q=' + this.state.term)
.then(response => this.setState({ autoCompleteResults: response.librarys }))
}
getAutoCompleteResults(e){
this.setState({
term: e.target.value
}, () => {
fetch('/search?q=' + this.state.term)
.then(response => this.setState({ autoCompleteResults: response.librarys }))
});
}
render(){
let autoCompleteList = this.state.autoCompleteResults.map((response, index) => {
return <div key={index}>
<h2>{response.title}</h2>
<p>{response.desc}</p>
</div>
});
return (
<div>
<input ref={ (input) => { this.searchBar = input } } value={ this.state.term } onChange={ this.getAutoCompleteResults.bind(this) } type='text' placeholder='Search Syntaxes' />
{ autoCompleteList }
</div>
)
}
}
export default SearchFilter
，并且当前设置为空数组，直到用户实际上，我开始搜索/过滤结果。
我还将包括我的主要组件和控制器代码以供参考：
MainPage.js
mapmain_controller.js
autoCompleteResults我认为这个问题很简单，但是正如我上面所说，我已经困扰了好几个小时，根本没有运气。在此先感谢您的协助。