Question

无法在 React Hook 中映射异步获取请求的结果[重复]

2021-06-06

171

reactjs react-hooks fetch

我发现了不少与此相关的问题，但我似乎无法找到有效的解决方案，我也不确定为什么。

我在 React 功能组件中有一个异步获取请求。它返回一些虚拟 JSON 数据，然后我想映射这些数据。

console.log（和 Postman）中所有内容均正确返回，但是当涉及到映射结果时，我得到了

TypeError: Cannot read property 'map' of undefined

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;

有人能帮我理解原因吗？我觉得我在这方面的知识可能存在一些根本性的差距？？或者我错过了一些简单的东西？

将 codesandbox 添加到演示并初始化 dummyData 的状态

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

Answer 1

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;

演示

Answer 2

您尚未初始化状态 - dummyData

将状态声明更改为：

const [dummyData, setDummyData] = useState([]);

Aniket Kolekar

2021-06-06