Question

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

2022-07-12

2462

javascript reactjs typescript

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

"Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'length')"

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为单位。将其默认为空数组将有所帮助，但是您仍然需要确保处理数组没有值的情况，这意味着您没有显示的显示。

937930597

Answer 3

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

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

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

如果未定义 netflixOriginals ，则可选链式运算符 ( ?. ) 将阻止对 length 属性的第一次检查抛出错误。