javascript - 如何将 API 结果显示在屏幕上？

Question

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

TypeError：无法读取未定义的属性“长度”

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

应用程序.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

详细信息.js

import React from "react"

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

export default Details

这是 API 数据。

标签： javascriptreactjsapifetch

Answer 1

我的猜测是 data.response 是未定义的，这就是你得到错误的原因。

尝试这个：

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