在 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