Javascript TypeError:this.state.searchResults.map不是函数

当我试图在搜索框中输入时，它会导致键入错误。我已将搜索结果声明为状态。但这仍然是一个错误。我给州政府打电话不恰当吗？我应该换什么？我写的是地图法吗

对不起，我是新来的。有人能告诉我我做错了什么吗？谢谢

Search.js

    import React, { Component }  from 'react';
import './Search.css';
import axios from 'axios';

class Search extends Component {
    constructor(props){
        super(props);
        this.state = {
            searchResults : []
        }
    }

    componentDidMount () {
        const token = 'Bearer Wookie2019';
        axios.get('https://wookie.codesubmit.io/movies?q=<search_term>',{
           headers: {
             'Authorization': token
           }
         }).then(response => {
           this.setState({movies : response.data.movies});
        console.log(response);
      });
    }

    searchHandler = (event) => {
        this.setState({
            searchResults : event.target.value
        })
        console.log(this.searchResults);
    }
    render(){
        return (
            // <div className="search" >
            //         <input className = "form-control" type="text" avlue="inputVal" onChange = {this.searchHandler}/>                
            //         {/* <i className="fas fa-search"></i> */}
            //         <button className ="btn btn-info">Search</button>
            //         <div className ="searchres">
            //         </div>
            // </div>
            <div>
                <form>
                    <input className = "form-control" placeholder = "Search Movies" ref = { input => this.search = input} onChange = {this.searchHandler}/>
                </form>
                <div className = "searchresults">
                    { this.state.searchResults.map(searchResult => <searchResult movie={this.state.searchResults}>{searchResult.title}</searchResult>)}
                </div>
            </div>
        )
    }
}

export default Search;

    
    Title.js
    
    import React, { Fragment } from 'react';
    import Search from '../Search/Search';
    import './Title.css';
    
    
    const Title = (props) => {
        return (
            <Fragment>
                <div className ="conatiner">
                    <div className ="row titlehead">
                        <div className="col-6">
                            <h3 className = "title">WOOKIE <br/> MOVIES</h3>
                        </div>
                        <div className = "col-6 searchMovie">
                            <Search {...props} />
                        </div>
                    </div>
                </div>
            </Fragment>
        )
    }
    
    export default Title

Search.js
从“React”导入React，{Component}；
导入“/Search.css”；
从“axios”导入axios；
类搜索扩展组件{
建造师（道具）{
超级（道具）；
此.state={
搜索结果：[]
}
}
组件安装（）{
const-token='Bearer-Wookie2019'；
axios.get（）https://wookie.codesubmit.io/movies?q=',{
标题：{
“授权”：令牌
}
})。然后（响应=>{
this.setState（{movies:response.data.movies}）；
控制台日志（响应）；
});
}
searchHandler=（事件）=>{
这是我的国家({
搜索结果：event.target.value
})
console.log（this.searchResults）；
}
render（）{
返回(
// 
//                         
//         {/*  */}
//搜寻
//         
//         
// 
this.search=input}onChange={this.searchHandler}/>
{this.state.searchResults.map（searchResult=>{searchResult.title}）}
)
}
}
导出默认搜索；
Title.js
从“React”导入React，{Fragment}；
从“../Search/Search”导入搜索；
导入“/Title.css”；
常量标题=（道具）=>{
返回(
伍基电影
)
}
导出默认标题

问题 如果我不得不猜测，我会说您的

onChange

处理程序正在将您的状态设置为未定义，或者更确切地说，设置为您输入的任何内容，这是一个字符串，而不是数组

另一个问题是，您试图在安装组件时获取数据，而不是在输入搜索时

装载后永远不会调用搜索

解决方案 我建议使用表单的

onSubmit

事件进行搜索。为输入提供一个可从

onSubmit

事件对象访问的

id

属性。将输入的值传递给计算查询字符串

import React, { Component }  from 'react';
import './Search.css';
import axios from 'axios';

class Search extends Component {
  constructor(props){
    super(props);
    this.state = {
      searchResults : []
    }
  }

  searchHandler = (event) => {
    event.preventDefault();
    const searchTerm = event.target.searchTerm.value
    const token = 'Bearer Wookie2019';
    axios.get(`https://wookie.codesubmit.io/movies?q=${searchTerm}`,{
      headers: {
        'Authorization': token
      }
    }).then(response => {
      this.setState({ movies: response.data.movies });
      console.log(response);
    });
  };

  render(){
    return (
      <div>
        <form onSubmit={searchHandler}>
          <input
            id="searchTerm"
            className="form-control"
            placeholder="Search Movies"
          />
          <button type="submit">Search</button>
        </form>
        <div className="searchresults">
          {this.state.searchResults.map(searchResult => <searchResult movie={this.state.searchResults}>{searchResult.title}</searchResult>)}
        </div>
      </div>
    )
  }
}

import React，{Component}来自'React'；
导入“/Search.css”；
从“axios”导入axios；
类搜索扩展组件{
建造师（道具）{
超级（道具）；
此.state={
搜索结果：[]
}
}
searchHandler=（事件）=>{
event.preventDefault（）；
const searchTerm=event.target.searchTerm.value
const-token='Bearer-Wookie2019'；
axios.get(`https://wookie.codesubmit.io/movies?q=${searchTerm}`{
标题：{
“授权”：令牌
}
})。然后（响应=>{
this.setState（{movies:response.data.movies}）；
控制台日志（响应）；
});
};
render（）{
返回(
搜寻
{this.state.searchResults.map（searchResult=>{searchResult.title}）}
)
}
}

您的

searchHandler

方法在哪里？组件也应该是大写的

@drewrese我已经更新了，它抛出了一个类型错误。请看一看。@souravsatyam我已经更新了它，但是它抛出了一个类型errorAck，您编辑了代码以提供正确的处理程序。什么是类型错误？