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

我发现要从三层嵌套中获得道具。我有一个全局组件是我的观点，在这个组件中我有

MovieRow

组件，它返回条件组件

IsFav

或

IsNotFav

。但是在

MovieRow

组件中，我无法获取道具数据

MovieRow.js：

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 };

从“React”导入React；
导入“./css/MovieRow.css”；
从“./../App”导入{APIKEY，baseURL}；
从“./../View/Popular”导入{filter}”；
var myFavoriteMovies=[]；
功能IsFav（道具）{
返回(
{道具.电影.标题}
{道具。电影。概述}

);
}
功能为非FAV（道具）{
返回(
{道具.电影.标题}
{道具。电影。概述}

);
}
类MovieRow扩展了React.Component{
建造师（道具）{
超级（道具）；
this.addFavorite=this.addFavorite.bind（this）；
this.deleteFavorite=this.deleteFavorite.bind（this）；
此.state={
我假装：错
};
}
viewMovie（）{
常量url=”https://www.themoviedb.org/movie/“+this.props.movie.id；
window.location.href=url；
log（this.props.movie.id）；
}
addFavorite（）{
this.setState（{isFaved:true}）；
const favMovie=“.concat”(
baseURL，
“电影/”，
这个.props.movie.id，
“？api_键=”，
阿皮基
);
推送（favMovie）；
}
删除收藏夹（）{
this.setState（{isFaved:false}）；
}
render（）{
const isFaved=this.state.isFaved；
让电影；
如果（是伪造的）{
电影=(
);
}否则{
电影=；
}
返回；
}
}
导出{MovieRow作为默认值，myFavoriteMovies}；

View.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 });
      });
  }
...

。。。
componentDidMount（）{
让url=“.concat”（baseURL，“电影/流行”？api_key=“，APIKEY）；
获取（url）
.then（res=>res.json（））
。然后（数据=>{
const results=data.results；
var movieRows=[]；
for（设i=results.length-1；i>=0；i--）{
results.Posteru src=
"https://image.tmdb.org/t/p/w185“+结果[i].海报路径；
常数movieRow=(
);
推（movieRow）；
数据表推送（结果[i]）；
}
this.setState（{rows:movieRows}）；
});
}
...

---

编辑：我试图将fetch中的数据传递到一个全局变量中，以便在带有forEach的MovieRow中使用，但它不是干净的，并且我的变量数组有一个奇怪的返回。它返回长度为0的myArray。在控制台中，输出为

[]

，在

[]

下，我看到了我的对象。

您将电影id作为

键

提供给

IsNotFav

和

IsFav

组件。使用

电影

道具，因为

键

由React内部使用，从未真正传递到组件

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

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

  return movie;
}

render（）{
const isFaved=this.state.isFaved；
让电影；
如果（是伪造的）{
电影=；
}否则{
电影=；
}
回归电影；
}

您正在以

键的形式提供电影id

。使用

电影

道具，因为

键

由React内部使用，从未真正传递到组件<代码>@Tholle你是最棒的！