时间戳

首页 > 解决方案 > 从三个叠瓦组件中获取道具

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

问题描述

我发现从三层嵌套中获取道具。我在全局组件上有我的观点，在这里面我有MovieRow返回条件组件的组件IsFav或IsNotFav. 但是在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 };

查看.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 中的数据传递到全局变量中，以便在带有 forEach 的 MovieRow 中使用，但不干净，而且我的变量数组有一个奇怪的返回。它返回长度为 0 的 myArray。在控制台中，输出是[]并且在[]我看到我的对象下。

标签： javascriptarraysreactjs

解决方案

您正在为key您的IsNotFav和IsFav组件提供电影 ID。改用movieprop，因为keyReact 在内部使用它并且从未真正传递给组件。

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

推荐阅读