javascript - 在将 API 数据传递到组件方面需要帮助

Question

我正在开发一个非常简单的电影查找器，它将返回包含用户输入的电影名称的电影列表。现在，我只是想在屏幕上显示信息。

我正在使用 React，我很难让它工作。我有三个组件，我的主要 App 组件，将显示结果列表的 movieView 组件，以及将显示电影标题、概述和主页的电影组件本身。我是 React 的新手，所以我试图了解如何使它工作。以下是我对每个组件的代码：

   **APP COMPONENT:** 
    import React, { Component } from 'react';
    import Axios from 'axios';
    import MovieView from './movieview';
    // import NewsView from './NewsView';

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          queryMovie: '',
          results: [],
          newsdata:'',
          movieFound: false,
        };
        this.handleInputChange = this.handleInputChange.bind(this);
        this.searchMovie = this.searchMovie.bind(this);
      }

      handleInputChange(event) {
        event.preventDefault()
        this.setState({
          [event.target.name]: event.target.value,
        });
        }

      searchMovie(event) {
        console.log(this.state.queryMovie)
        event.preventDefault()
        Axios
        .get(`/api?query=${this.state.queryMovie}`)
        .then(results => results.data)
        .then(results => this.setState({ 
          results: results,
          movieFound: true,
          queryMovie: '',
         }))
      }

      componentWillMount() {
        Axios 
        .get(`http://newsapi.org/v2/top-headlines?country=us&category=entertainment&apiKey=4a6b942733e54342962e5df94feb48aa`)
        .then(response => response.data)
        .then(newsdata => this.setState({ newsdata }));
        console.log('console inside componentwillmount', this.state.newsdata)
      }

      render() {

        return (
          <div className="container">
            <div className="headerbodycontainer">
              <h2>App with 2 APIs</h2>
              <h4>Movie Finder and Entertainment News</h4>
            </div>
              <div className="row">
                <div className="col-6">
                  <div className="headerbodycardcontainer">
                    <div className="card-header">Movie Finder</div>
                    <div className="card-body">
                      <input name="queryMovie" onChange={this.handleInputChange} placeholder="Enter Movie" value={this.state.queryMovie}></input>
                      <button onClick={this.searchMovie}>Search Movie</button>
                    </div> 
                    <div className="container">
                      <MovieView 
                        results={this.state.results}
                        movieFound={this.state.movieFound}
                    /></div>
                  </div>
                </div>
                <div className="col-6">
                  <div className="headerbodycontainer">
                    <div className="card-header">ENTERTAINMENT NEWS</div>
                      {/* {
                      this.state.newsdata.map(article => (
                        <NewsView
                          title={article.title}
                          description={article.description}
                          url={article.url}
                          />
                      ))
                    }   */}
                    <div className="card-body"></div>
                  </div>
                </div>
            </div>
          </div>
        );
      }
    }

    export default App;

    **MovieView component:**
    import React, { Component } from 'react'
    import Movie from './movie'

    const MovieView = (props) => {
        console.log(props.movieFound, 'props passed to movieview')
        console.log(props.results.results, 'results inside movieview')
        if (props.movieFound == true && props.results.results.length>0) {
            return (<div><Movie movieData={props.results}/></div>)
        } else {
            return <div>HELLO WORLD</div>
        }
    }

    export default MovieView;

    **Movie component:**
    import React from 'react';

    const Movie = (props) => {
        console.log(props, 'inside movie comp')
        console.log(props.results, 'inside props results')
        props.results.map((movie) => {
        return <div>
            <ul>
                <li>Movie title: {movie.original_title}</li>
                <li>Overview: {movie.overview}</li>
                <li>Homepage: {movie.homepage}</li>
            </ul>
        </div>
        })
    }


    export default Movie;

所以现在我进入了电影组件，但我收到一个错误，表明我目前没有返回任何东西。任何帮助或反馈将不胜感激。谢谢！

标签： javascriptreactjs

Answer 1

您的Movie组件需要返回有效的 JSX，即元素数组或 null。

const Movie = (props) => {
  console.log(props, 'inside movie comp');
  console.log(props.results, 'inside props results');

  return props.results.map((movie) => { // return the mapped array of movies
    return (
      <div>
        <ul>
          <li>Movie title: {movie.original_title}</li>
          <li>Overview: {movie.overview}</li>
          <li>Homepage: {movie.homepage}</li>
        </ul>
      </div>
    );
  })
}

MovieView还包括对 的无效引用results。props.results与props.results.results.

const MovieView = (props) => {
    console.log(props.movieFound, 'props passed to movieview')
    console.log(props.results, 'results inside movieview')
    if (props.movieFound && props.results.length) {
        return (<div><Movie movieData={props.results}/></div>)
    } else {
        return <div>HELLO WORLD</div>
    }
}