未处理的运行时错误类型错误：无法读取未定义的属性（读取“长度”）

Question

我正在制作电影应用程序克隆，但出现此错误：

“未处理的运行时错误类型错误：无法读取未定义的属性（读取'长度'）”

错误截图

import Image from 'next/image'
import { useEffect, useState } from 'react'
import { baseUrl } from '../constants/movie'
import { Movie } from '../typing'

interface Props {
  netflixOriginals: Movie[]
}

function Banner({ netflixOriginals }: Props) {
  const [movie, setMovie] = useState<Movie | null>(null)
 
  useEffect(() => {
    setMovie(
      netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)]
    )
  }, [netflixOriginals])

  console.log(movie)
  
  return (
    <div>
      <div className='absolute top-0 left-0 h-[95vh] w-screen'>
      <Image
          src={`${baseUrl}${movie?.backdrop_path || movie?.poster_path}`}
          layout="fill"
        />
      </div>
    </div>
    )
}

export default Banner

Answer 1

您似乎没有定义netflixOriginals 。 使用可选链接，以便在netflixOriginals未定义时不引用length属性。

  useEffect(() => {
    setMovie(
      netflixOriginals[Math.floor(Math.random() * netflixOriginals?.length)]
    )
  }, [netflixOriginals])

Answer 2

netflixOriginals可以作为 null 传入。 将其默认为空数组会有所帮助，但您仍然需要确保处理数组没有值的情况，这意味着您没有要显示的节目。

import Image from 'next/image'
import { useEffect, useState } from 'react'
import { baseUrl } from '../constants/movie'
import { Movie } from '../typing'

interface Props {
  netflixOriginals: Movie[]
}

function Banner({ netflixOriginals = [] }: Props = {}) {
  const [movie, setMovie] = useState<Movie | null>(null)
 
  useEffect(() => {
    setMovie(
      netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)]
    )
  }, [netflixOriginals])


  
  return (
   {
   movie 
   ? <div>
      <div className='absolute top-0 left-0 h-[95vh] w-screen'>
      <Image
          src={`${baseUrl}${movie?.backdrop_path || movie?.poster_path}`}
          layout="fill"
        />
      </div>
     </div>
   : <div>There are no movies</div>
    )
}

export default Banner

Answer 3

netflixOriginals最初可能是作为null传入的。 您可以在调用setMovie()之前测试有效列表。

  useEffect(() => {
    if (netflixOriginals?.length) {
      setMovie(
        netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)]
      )
    }
  }, [netflixOriginals])

这也将阻止您的代码在数组为空时调用setMovie() 。

如果netflixOriginals ，可选的链接运算符 ( ?. ) 将防止对长度属性的第一次检查引发错误。