我正在处理一个搜索字段，我想将数据返回给用户，但出现了错误：TypeError：无法读取未定义的属性“map”。我似乎无法找出为什么 map 未定义，

这是我的代码： 代码沙盒

我尝试从 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')
);