时间戳

首页 > 解决方案 > 无法在 React Hook 中映射异步获取请求的结果

reactjs - 无法在 React Hook 中映射异步获取请求的结果

问题描述

我发现了很多与此相关的问题，但我似乎无法找到有效的解决方案，我不知道为什么。

我在反应功能组件中有一个异步获取请求。它返回一些虚拟的 JSON 数据，然后我想对其进行映射。

一切都在console.log（和Postman）中正确返回，但是在映射我得到的结果时

TypeError：无法读取未定义的属性“地图”

import "./App.css";
import React, { useState, useEffect } from "react";

function App() {
  const [dummyData, setDummyData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setDummyData(data);
      });
  }, []);

  return (
    <div className="App">
      {console.log(dummyData)}

      {dummyData.map((d) => {
        return <h1> {d}</h1>;
      })}
    </div>
  );
}

export default App;

谁能帮我理解为什么？我觉得我在这方面的知识可能存在一些根本性的差距？？还是我错过了一些简单的东西？

在演示中添加代码框并初始化 dummyData 的状态

https://codesandbox.io/s/objective-benz-t1zpi?file=/src/App.js

标签： reactjsreact-hooksfetch

解决方案

https://jsonplaceholder.typicode.com/todos/1返回一个Object，不是一个Array。dummyData替换为Object没有数组方法的（一旦收到响应）。这就是为什么你会出错。

我想你需要这个https://jsonplaceholder.typicode.com/todos。

 import React, { useState, useEffect } from "react";

function App() {
  const [dummyData, setDummyData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setDummyData(data);
      });
  }, []);

  return (
    <div className="App">
      {dummyData.map((d) => {
        return (
          <h1>
            {d.id} - {d.title}
          </h1>
        );
      })}
    </div>
  );
}

export default App;

演示

推荐阅读