突然出现 Uncaught TypeError 错误：无法读取未定义的属性（读取“0”），而相同的代码之前运行良好

Question

我制作了一个 spring API，并在

Carousel

文件中调用它以获得

Hero.js

效果。直到昨晚它都工作得很好。

但是今天当我重新启动我的项目时[它显示错误

Uncaught TypeError: Cannot read properties of undefined (reading '0')

不明白哪里出错了

Hero.js

import './Hero.css';
import Carousel from 'react-material-ui-carousel';
import { Paper } from '@mui/material';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCirclePlay } from '@fortawesome/free-solid-svg-icons';
import {Link, useNavigate} from "react-router-dom";
import Button from 'react-bootstrap/Button';
import MovieData from './MovieData';


const Hero = ({movies}) => {

    const navigate = useNavigate();

    function reviews(movieId)
    {
        navigate(`/Reviews/${movieId}`);
    }

  return (
    <div className ='movie-carousel-container'>
      <Carousel>
        {
            movies?.map((movie) =>{
                return(
                    <Paper key={movie.imdbId}>
                        <div className = 'movie-card-container'>
                            <div className="movie-card" style={{"--img": `url(${movie.backdrops[0]})`}}>
                                <div className="movie-detail">
                                    <div className="movie-poster">

                                        {/* movie poster to movie details */}
                                        <img 
                                            variant ="info"
                                            onClick={() => reviews(movie.imdbId)}
                                            src={movie.poster}
                                            alt=""
                                        />
                                    </div>
                                    <div className="movie-title">
                                        <h4>{movie.title}</h4>
                                    </div>
                                    <div className="movie-buttons-container">
                                        <Link to={`/Trailer/${movie.trailerLink.substring(movie.trailerLink.length - 11)}`}>
                                            <div className="play-button-icon-container">
                                                <FontAwesomeIcon className="play-button-icon"
                                                    icon = {faCirclePlay}
                                                />
                                            </div>
                                        </Link>

                                        <div className="movie-review-button-container">
                                            <Button variant ="info" onClick={() => reviews(movie.imdbId)}>Reviews</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Paper>
                )  
            })
        }
      </Carousel>


        {/* Movie Details with Watchlist and Booking Button */}
        <div className='home'>
            <MovieData/>
        </div>
    </div>

  )
}

export default Hero

Answer 1

报错说明错误发生在你文件的第28行，这一行：

<div className="movie-card" style={{"--img": `url(${movie.backdrops[0]})`}}>

这表明无法在索引 0 处访问具有背景数组的电影对象（因此未填充背景）。如果没有看到其余代码，很难知道为什么，但请检查呈现 Hero 组件的组件并确保所有电影对象都包含一个背景数组。