Question

我正在尝试将信息传递到我的电影详细信息道具（特别是电影的标题）中，这是对象（在我的代码中作了注释，以供参考，但实际上它是另一个文件的一部分，没有导入错误）：

---文件TMDB.js ---

`// const TMDB = {
//   api_key: 'f------',
//   films: [
//     {
//       "id": 346364,
//         "title": "It",
//         "poster_path": "/9E2y5Q7WlCVNEhP5GiVTjhEhx1o.jpg",
//         "backdrop_path": "/tcheoA2nPATCm2vvXw2hVQoaEFD.jpg",
//         "overview": "In a small town in Maine, seven children known as The Losers Club come face to face with life problems, bullies and a monster that takes the shape of a clown called Pennywise.",`

在文件末尾，我写了一个导出默认表达式

这是我得到的错误：

    "TypeError: Cannot read property 'title' of undefined"

这是我要获取要显示的对象标题的文件-我缺少什么？：

---文件FilmListing.js

import React from 'react'
import ReactDOM from 'react-dom'
import FilmDetails from './../FilmDetails/FilmDetails.js'
import { TMDB } from '../../TMDB.js'

class FilmListing extends React.Component {
  constructor(props) {
    super(props);
  }
render() {
    return(
      <div className="film-list">
          <h1 className="section-title">FILMS</h1>
          <p> <FilmDetails/> </p>
          <p film = {TMDB.props.title}> {this.film.title} </p>
      </div>
    )
  }
}

编辑-我已经尝试过{this.props.films} {this.props.TMDB.title} {this.props.TMDB.films.title}

我假设我必须将标题作为数组或其他内容的一部分来访问（有多个其他条目，我只是试图显示一个对象）

Answer 1

我意识到我必须回过头来查看对象的结构，以了解应该如何正确调用它。

我的应用现在呈现出这样的效果（抓取所有电影的名称而不是一个）

render() {
    return(
      <div className="film-list">
          <h1 className="section-title">FILMS</h1>
          <p> <FilmDetails/> </p>
          <p> {TMDB.films.map((film , index)=> {
            return (
          <div>
            <h2>
              {film.release_date}
            </h2>
            <p>
              {film.title} <br/>
              {film.id}
            </p>
          </div>
           )
          })
          } </p>
      </div>
    )
  }
}

无法从对象访问信息以作为道具传递

1 个答案: