开发类Netflix React电影App遇报错：Objects are not valid as a React child 求助

我正在开发一个类似Netflix的React电影应用，UI用Bootstrap实现，已经完成简易登录表单（任意输入即可登录，登录后进入电影列表页）。查了不少资料，但多数解决方案都不适用我的情况。

问题触发场景 #

点击电影卡片时出现如下报错：

不能将对象作为React子元素（发现带有键{Name, Description}的对象）。如果要渲染子元素集合，请改用数组。

预期效果 #

点击电影卡片后能加载对应的电影详情页

问题 #

该如何解决这个报错？

疑似问题位置 #

movie-view.jsx文件

相关源码 #

movie-card.jsx #

import React from 'react';
import propTypes from 'prop-types';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';

export class MovieCard extends React.Component {
  render() {
    const {
      movieData,
      onMovieClick
    } = this.props;
    return ( 
      <Card >
      <Card.Img variant = 'top'
      className = 'thumbnail'
      src = {
        movieData.ImageURL
      }
      /> 
      <Card.Body >
      <Card.Title > {
        movieData.Title
      } </Card.Title> 
      <Card.Text > {
        movieData.Description
      } </Card.Text> 
      <Button onClick = {
        () => onMovieClick(movieData)
      }
      variant = 'link' >
      Open 
      </Button> 
      </Card.Body> 
      </Card>
    );
  }
}
MovieCard.propTypes = {
  movieData: propTypes.shape({
    Title: propTypes.string.isRequired,
    Description: propTypes.string.isRequired,
    ImageURL: propTypes.string,
  }).isRequired,
  onMovieClick: propTypes.func.isRequired,
};

movie-view.jsx #

import React from 'react';

export class MovieView extends React.Component {
  keypressCallback(event) {
    console.log(event.key);
  }
  componentDidMount() {
    document.addEventListener('keypress', this.keypressCallback);
  }

  componentWillUnmount() {
    document.removeEventListener('keypress', this.keypressCallback);
  }
  render() {
    const { movieData, onBackClick } = this.props;
    return (
      <div className='movie-view'>
        <div className='movie-poster'>
          <img src={movieData.ImageURL} />
        </div>
        <div className='movie-title'>
          <span className='label'>Title: </span>
          <span>{movieData.Title}</span>
        </div>
        <div className='movie-description'>
          <span className='label'> Description: </span>
          <span className='value'> {movieData.Description}</span>
        </div>
        <div className='movie-director'>
          <span className='label'>Director: </span>
          <span>{movieData.Director}</span>
        </div>
        <div className='movie-genre'>
          <span className='label'>Genre: </span>
          <span className='value'>{movieData.Genre}</span>
        </div>

        <button
          onClick={() => {
            onBackClick(null);
          }}
        >
          Back
        </button>
      </div>
    );
  }
}

控制台报错截图 #

解决方案 #

报错的核心原因是你在MovieView组件里直接渲染了对象类型的数据。从报错信息里的{Name, Description}可以推断，你的电影数据中Director或Genre并非字符串，而是包含Name等属性的对象——React无法直接渲染整个对象，必须指定要显示的具体属性。

修改movie-view.jsx中的对应部分即可解决：

修改后的movie-view.jsx关键代码片段 #

// 导演部分：渲染Director对象的Name属性
<div className='movie-director'>
  <span className='label'>Director: </span>
  <span>{movieData.Director?.Name}</span>
</div>
// 类型部分：渲染Genre对象的Name或同时显示Name和Description
<div className='movie-genre'>
  <span className='label'>Genre: </span>
  <span className='value'>{movieData.Genre?.Name}</span>
</div>
// 如果需要显示类型描述，可以改成：
// <span className='value'>{movieData.Genre?.Name} - {movieData.Genre?.Description}</span>

这里用了可选链操作符?.，是为了避免数据未加载时出现Cannot read property 'Name' of undefined的报错，保证代码健壮性。

内容的提问来源于stack exchange，提问作者Elliot