Javascript 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.

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

不带tries的基代码。我尝试渲染的函数是

IsFav

IsNotFav

fils.js：

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

从“React”导入React；
导入“./css/MovieRow.css”；
从“./../App”导入{APIKEY，baseURL}；
var myFavoriteMovies=[]；
功能IsFav（道具）{
返回(
{this.props.movie.title}
{this.props.movie.overview}

);
}
功能为非FAV（道具）{
返回(
{this.props.movie.title}
{this.props.movie.overview}

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

问题在于

返回{movie}

你不需要把

电影

放在

{/code>里面，问题在于
返回{movie}
你不需要把
电影
放在
{/code>你正在从
MovieRow
渲染方法返回一个对象
{movie movie movie}/code>。只需直接返回JSX即可：

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

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

  return movie;
}

render（）{
const isFaved=this.state.isFaved；
让电影；
如果（是伪造的）{
电影=；
}否则{
电影=；
}
回归电影；
}
您正在从
MovieRow
渲染方法返回对象
{movie:movie}
。只需直接返回JSX即可：

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

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

  return movie;
}

render（）{
const isFaved=this.state.isFaved；
让电影；
如果（是伪造的）{
电影=；
}否则{
电影=；
}
回归电影；
}
当我删除{}时，我有一个错误（TypeError:无法读取未定义的属性'props'），该错误必须存在于
IsFav
和
IsNotFav
函数中。看到你正在使用
这个.props。
但是你只需要使用
道具。
。删除
this
部分。当我删除{}时，我有一个错误（TypeError:无法读取未定义的属性'props'），该错误必须存在于
IsFav
和
IsNotFav
函数中。看到你正在使用
这个.props。
但是你只需要使用
道具。
。删除
这个部分。谢谢，但是当我这么做的时候，我的道具就没有定义了。我已经确定了您的解决方案。@crg63您不应该在无状态功能组件中使用
this.props
。只需使用作为第一个参数传入的
props
。编辑：当我删除
this
@crg63 Write
props.movie.id
，而不是
this.props.movie.id
。好的，谢谢你的帮助@Tholle:）如果我找不到谢谢你，我会继续写新的主题，但是当我这么做的时候，我的道具变得不明确了。我已经确定了您的解决方案。@crg63您不应该在无状态功能组件中使用
this.props
。只需使用作为第一个参数传入的
props
。编辑：当我删除
this
@crg63 Write
props.movie.id
，而不是
this.props.movie.id
。好的，谢谢你的帮助@Tholle:）如果我找不到新主题，我会继续