在keypress上显示搜索结果

Question

我尝试在输入中显示每个按键的搜索结果：

getMovies(e){ 
    axios.get(`http://www.omdbapi.com/?t=${e.target.value}`)
   .then((response) => {
    this.setState({ movies: response.data });
    })
.catch((error) => {
     console.log(error);
   });
}

render() {
   return (
      <div className="container">
        <SearchForm onkeydown={this.getMovies}  />
        <MovieList movies={this.state.movies}/>
     </div>
     );
   }
}

在我的搜索表单中，我将我的函数绑定到FormControl onChange：

 export default class SearchForm extends React.Component{
  render(){
    return(
      <Row>
           <Col md={6} >
            <h2>Custom search field</h2>
               <div className="custom-search-input">
                   <Col md={12} className="input-group" >
                          <FormControl
                            type="text"
                            bsSize="lg"
                            value={this.props.val}
                            placeholder="Enter text"
                            onChange={this.props.onkeydown.bind(this)}
                        />
                    <span className="input-group-btn">
                        <button className="btn btn-lg" type="button">
                            <i className="glyphicon glyphicon-search"></i>
                        </button>
                    </span>
                </Col>
            </div>
        </Col>
  </Row>)
    }
 }

我的movielist组件：

export default class MovieList extends React.Component{

render(){
var userNodes = this.props.movies.map(function(movie){
    return (
          <tr key={movie.id}>
            <td>{movie.Year}</td>
            <td >{movie.Title}</td>
            <td >{movie.Released}</td>   
          </tr>
        )
    });

    return (
      <div>
       <Table responsive>
            <thead>
              <tr>
                <th>id</th>
                <th>Year</th>
                <th>Title</th>
                <th>Released</th>
              </tr>
            </thead>
            <tbody>
            {userNodes}
            </tbody>
          </Table>
      </div>
    );

} }

我可以在网络面板上获得响应，但状态未更新以显示MovieList组件。

如何更新state并将其显示在我的MovieList？

中

Answer 1

我检查了该API，似乎返回object，而不是array。

更新1

您可以使用以下内容转换组件：

export default class MovieList extends React.Component{

  render(){
      const { movie } = this.props;
      return (
        <div>
         <Table responsive>
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Year</th>
                  <th>Title</th>
                  <th>Released</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{movie.imdbID}</td>
                  <td>{movie.Year}</td>
                  <td>{movie.Title}</td>
                  <td>{movie.Released}</td>
                </tr>
              </tbody>
            </Table>
        </div>
      );
  }

}

并使用它：

<MovieList movie={this.state.movies} />

请注意我使用的是movie而不是movies。

更新2：

您也可以（我建议这样做）将您的MovieList转换为dumb functional component：

const MovieList = ({ movie }) => (
  <div>
    <Table responsive>
         <thead>
           <tr>
             <th>Id</th>
             <th>Year</th>
             <th>Title</th>
             <th>Released</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>{movie.imdbID}</td>
             <td>{movie.Year}</td>
             <td>{movie.Title}</td>
             <td>{movie.Released}</td>
           </tr>
         </tbody>
       </Table>
  </div>
)

export default MovieList;