我正在处理一个要向用户返回数据的搜索字段,但收到错误消息:TypeError:无法读取未定义的属性“地图”。我似乎无法找出地图未定义的原因,
这是我的代码:code sandbox
我尝试从 j-fiddle(下面的代码)中提取示例代码并将其转换为功能组件。这是我试图从 j-fiddle 操作的代码
class Wrapped extends React.Component {
constructor(props){
super(props)
this.state = {
results: []
}
this.search = this.search.bind(this)
}
search(results){
this.setState({results})
}
render(){
const { results } = this.state
return (
<div>
<Search onSearch={this.search} />
<Result {...this.state} />
</div>
)
}
}
class Search extends React.Component {
constructor(props){
super(props);
this.state = {
searchValue: ''
}
this.handleOnChange = this.handleOnChange.bind(this);
}
handleOnChange(e){
this.setState({
[e.target.name]: e.target.value
}, () => {
setTimeout(() => {
// it can be the result from your API i just harcoded it
const results = ['hello', 'world', 'from', 'SO'].filter(value => value === this.state.searchValue)
this.props.onSearch(results)
}, 1000)
})
}
render(){
return (
<div>
Search: <input name="searchValue" type="text" onChange={this.handleOnChange} />
</div>
)
}
}
const Result = ({results}) => {
return (
<ul>
{results.map(result => <li key={result}>{result}</li>)}
</ul>
)
}
ReactDOM.render(
<Wrapped/>,
document.getElementById('container')
);
答案 0 :(得分:2)
我在检查您的代码时发现 Wrapped.js
中存在以下错误:
<Results {...results} />
由于 results
声明如下:
const [results, setResults] = useState([]);
{...results}
会将内容数组以不好的方式传播到属性中,我建议您阅读有关 Spread Operator
here 的内容。
为了修复您的错误,您可以执行以下解决方案之一:
简单的解决方案
<Results results={results} />
扩展运算符解决方案
...
const resultsProps = {
results,
}
...
return (
<>
<SearchComp onSearch={search} />
<Results {...resultsProps} />
</>
);
...
希望这对您有用,请让我知道并记得阅读有关 Spread Operator
的内容,它在 .JS 中是一个非常有用的函数。