从三个叠瓦组件中获取道具

我找到了三层巢穴的道具。我对全球组件有自己的看法,在这里面我有 MovieRow 返回条件成分的成分 IsFav 或 IsNotFav 是的。但是在 电影 组件我无法获取道具数据。

电影:

import React from "react";
import "../css/MovieRow.css";
import { APIKEY, baseURL } from "../../App";
import { filter } from "../../View/Popular";

var myFavoriteMovies = [];

function IsFav(props) {
  return (
    <div key={props.movie.id} className="MovieRow">
      <div>
        <img alt="poster" src={props.posterSrc} />
      </div>
      <div>
        <h3>{props.movie.title}</h3>
        <p>{props.movie.overview}</p>
        <input type="button" onClick={this.viewMovie.bind(this)} value="View" />

        <button onClick={props.onClick} className="heart" />
      </div>
    </div>
  );
}

function IsNotFav(props) {
  return (
    <div key={props.movie.id} className="MovieRow">
      <div>
        <img alt="poster" src={props.posterSrc} />
      </div>
      <div>
        <h3>{props.movie.title}</h3>
        <p>{props.movie.overview}</p>
        <input type="button" onClick={this.viewMovie.bind(this)} value="View" />

        <button onClick={props.onClick} className="toggled heart" />
      </div>
    </div>
  );
}

class MovieRow extends React.Component {
  constructor(props) {
    super(props);
    this.addFavorite = this.addFavorite.bind(this);
    this.deleteFavorite = this.deleteFavorite.bind(this);
    this.state = {
      isFaved: false
    };
  }

  viewMovie() {
    const url = "https://www.themoviedb.org/movie/" + this.props.movie.id;
    window.location.href = url;
    console.log(this.props.movie.id);
  }

  addFavorite() {
    this.setState({ isFaved: true });
    const favMovie = "".concat(
      baseURL,
      "movie/",
      this.props.movie.id,
      "?api_key=",
      APIKEY
    );
    myFavoriteMovies.push(favMovie);
  }

  deleteFavorite() {
    this.setState({ isFaved: false });
  }

  render() {
    const isFaved = this.state.isFaved;
    let movie;

    if (isFaved) {
      movie = (
        <IsNotFav key={this.props.movie.id} onClick={this.deleteFavorite} />
      );
    } else {
      movie = <IsFav key={this.props.movie.id} onClick={this.addFavorite} />;
    }

    return <div />;
  }
}
export { MovieRow as default, myFavoriteMovies };

视图.js

...
 componentDidMount() {
    let url = "".concat(baseURL, "movie/popular?api_key=", APIKEY);

    fetch(url)
      .then(res => res.json())
      .then(data => {
        const results = data.results;

        var movieRows = [];
        for (let i = results.length - 1; i >= 0; i--) {
          results.poster_src =
            "https://image.tmdb.org/t/p/w185" + results[i].poster_path;
          const movieRow = (
            <MovieRow
              key={results[i].id}
              movie={results[i]}
              posterSrc={results.poster_src}
              favornot
            />
          );
          movieRows.push(movieRow);
          dataTab.push(results[i]);
        }
        this.setState({ rows: movieRows });
      });
  }
...

编辑:我试图将从fetch获取的数据传递到一个全局变量中,以便在movierow中与foreach一起使用,但它不是干净的,而且我的变量数组有一个奇怪的返回。它返回长度为0的myArray。在控制台中,输出是 [] 以及以下 [] 我看到我的东西了。