如何将 API 结果显示在屏幕上？答案

【问题标题】：How to get API results to screen?如何将 API 结果显示在屏幕上？
【发布时间】：2021-02-09 12:20:53
【问题描述】：

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

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

下面的代码代表我项目的主页。我想在主页上显示 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 数据。

【问题讨论】：

标签： javascript reactjs api fetch

【解决方案1】：

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

试试这个：

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

【讨论】：

【解决方案2】：

这可能适用于您的情况，您可以尝试一次，只需在 characters.length 前面添加字符

 <div>
            {characters && characters.length > 0 && characters.map((character) => <Details />)}
    </div>

【讨论】：

【解决方案3】：

使用这个操作符https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining或者……

characters && (characters.length > 0 && characters.map((character) => <Details />)

【讨论】：

【解决方案4】：

获取数据是一个异步过程，因此您需要等待结果才能显示依赖它的内容。

一个简单的解决方案是在数据加载时添加一个加载器：

if (!characters){
  return <>Loading</>;
}

return (
  //... your default view
)

否则你可以让你的 UseEffect 异步如下：

import React from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const data = await fetch("https://randomuser.me/api/");
    setData(await data.json());
  };

  if (!data) return <>Loading...</>;
  
  return (
    <div>
      <pre>{JSON.stringify(data)}</pre>
    </div>
  );
};

render(<App />, document.getElementById("root"));

这里是the stackblitz，如果你想查看的话。

【讨论】：