1组件2条件返回。如何呈现子集合?[副本]

我试图让2个条件返回组件,但我有一个错误:

Objects are not valid as a React child (found: object with keys {movie}). If you meant to render a collection of children, use an array instead.

我读了其他主题几乎相同的Subjet,我试图用她的解决方案纠正我的错误,但没有成功。

没有尝试的基本代码。函数所关心的(我尝试呈现的)是 IsFav IsNotFav .

文件:

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

var myFavoriteMovies = [];

function IsFav(props) {
  return (
    <div key={this.props.movie.id} className="MovieRow">
      <div>
        <img alt="poster" src={this.props.posterSrc} />
      </div>
      <div>
        <h3>{this.props.movie.title}</h3>
        <p>{this.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={this.props.movie.id} className="MovieRow">
      <div>
        <img alt="poster" src={this.props.posterSrc} />
      </div>
      <div>
        <h3>{this.props.movie.title}</h3>
        <p>{this.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;
  }

  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 onClick={this.deleteFavorite} />;
    } else {
      movie = <IsFav onClick={this.addFavorite} />;
    }
    return { movie };
  }
}

export { MovieRow as default, myFavoriteMovies };