Question

我发现从三层嵌套中获得道具。我对全局组件有自己的看法，在这个组件中，我有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 };

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

编辑：我试图将获取数据中的数据传递给forEach的MovieRow中使用的全局变量，但它不是干净的，并且我的变量数组有一个奇怪的返回值。它返回长度为0的myArray。在控制台中，输出为[]，在[]下，我看到了我的对象。

Answer 1

您将key和IsNotFav组件的电影ID作为IsFav。因为movie由React内部使用，并且从未真正传递给组件，所以请改用key道具。

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

从三个细齿状的组件中获得道具

1 个答案: