开发者问题收集

在 MovieList.js 第 7 行将对象从 FetchMovie 传递到 MovieList 组件时出现意外标记,预期为“}”错误

2022-02-19
61

这是 MovieList.js,我将一个 react 对象作为 prop 从 FetchMovie.js 传递给此组件,如下所示。我试过了,但它仍然在那里。请帮忙

MovieList.js

import React from "react";
function MovieList(props) {
  console.log(props.newFilm)
  return (
    <div className="filmm">
      <h1>{props.newFilm.film_name}</h1>
      <img src={props.newFilm.images.still.2.medium.film_image} />//line 7   
    </div>
  );
}

export default MovieList

FetchMovie.js 这是 FetchMovie.js 文件,通过这个组件,我将 users 对象作为 prop 传递给 MovieList.js,然后发生了错误。请帮忙。 我已经在 FetchMOvies.js 下方给出了 users 对象。

import React, { useState } from "react";
import MovieList from "./MovieList";
import users from "./MovieView";
let s = users.films;
function FetchMovies() {
  return (
    <div>
      {s.map((film) => (
        <MovieList key={film.film_id} newFilm={film} />
      ))}
    </div>
  );
}

export default FetchMovies;

这是 users 对象:

users={
  films: [
    {
      film_id: 258136,
      imdb_id: 2119543,
      imdb_title_id: "tt2119543",
      film_name: "The House With A Clock In Its Walls",
      other_titles: {
        EN: "The House With A Clock In Its Walls"
      },
      release_dates: [
        {
          release_date: "2018-09-21",
          notes: "GBR"
        }
      ],
      age_rating: [
        {
          rating: "12A ",
          age_rating_image:
            "https://d2z9fe5yu2p0av.cloudfront.net/age_rating_logos/uk/12a.png",
          age_advisory: "moderate threat, scary scenes"
        }
      ],
      film_trailer: "https://dzm1iom8kpoas.cloudfront.net/258136_uk_high.mp4",
      synopsis_long:
        "In the tradition of Amblin classics where fantastical events occur in the most unexpected places, Jack Black and two-time Academy Award® winner Cate Blanchett star in THE HOUSE WITH A CLOCK IN ITS WALLS, from Amblin Entertainment.  The magical adventure tells the spine-tingling tale of 10-year-old Lewis (Owen Vaccaro) who goes to live with his uncle in a creaky old house with a mysterious tick-tocking heart.  But his new town's sleepy façade jolts to life with a secret world of warlocks and witches when Lewis accidentally awakens the dead.",
      images: {
        poster: {
          "1": {
            image_orientation: "portrait",
            region: "US",
            medium: {
              film_image:
                "https://d3ltpb4h29tx4j.cloudfront.net/258136/258136h1.jpg",
              width: 200,
              height: 300
            }
          }
        },
        still: {
          "2": {
            image_orientation: "landscape",
            medium: {
              film_image:
                "https://d3ltpb4h29tx4j.cloudfront.net/258136/258136h2.jpg",
              width: 300,
              height: 199
            }
          }
        }
      }
    }
  ],
  status: {
    count: 1,
    state: "OK",
    method: "filmsComingSoon",
    message: null,
    request_method: "GET",
    version: "ZUPIv200",
    territory: "UK",
    device_datetime_sent: "2018-09-14T09:26:34.793Z",
    device_datetime_used: "2018-09-14 09:26:34"
  }
};
2个回答

对象的键必须是字符串。您在对象本身中做对了。但是当您尝试访问它时,问题再次出现。

如果您坚持按原样使用它(也许您别无选择),则必须使用方括号表示法:

props.newFilm.images.still["2"].medium.film_image

为什么会出现该错误 :JavaScript 在遇到数字时停止查找对象,并即将返回 props.newFilm.images.still 其余部分无法理解,抛出的错误是“期望

Louys Patrice Bessette
2022-02-19

使用数字键时,请使用括号表示法而不是点表示法

<img src={props.newFilm.images.still.2.medium.film_image} />

<img src={props.newFilm.images.still["2"].medium.film_image} />

KcH
2022-02-19