当我从 API 获取数据时，会发生此错误。

TypeError: Cannot read property 'length' of undefined

以下代码代表我的项目的主页。我想在主页上显示 20 个数组项。

App.js

import React, { useState, useEffect } from "react" 
import banner from "./assets/marvel-group.jpg"    
import Details from "./components/details"

const CHARACTERS_API =
  "https://gateway.marvel.com:443/v1/public/characters?ts=thesoer&apikey=dkauyjs586ddh&hash=4b59bfb18ff6660c1f6alimit=20"

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#202020",
    },
  },
})

function App() {
  const classes = useStyles()

  const [characters, setCharacters] = useState([])

  useEffect(() => {
    fetch(CHARACTERS_API)
      .then((res) => res.json())
      .then((data) => {
        console.log(data)
        setCharacters(data.results)
      })
  }, [])

  return (
    <>
      <div>
        <img src={banner} alt="banner" width="100%" height="50%" />
      </div>
      <div>
        {characters.length > 0 && characters.map((character) => <Details />)}
      </div>
    </>
  )
}

export default App

Details.js

import React from "react"

const Details = () => <div>character</div>

export default Details

这是 API 数据。