地图函数错误：无法在反应 js 中读取未定义的属性（读取 'map'）

Question

我知道有人再次问过这个问题，但我不确定自己做错了什么，因为没有适合我的解决方案。我的代码：

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

function App() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((json) => {
        setItems(json.items);
      })

      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Data is loading...</p>;
  }
  return (
    <div className="App">
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            name: {item.name} | email: {item.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

我也试着这样写，以检查数组是否存在，但我没有得到错误，但我没有得到任何结果：

{items?.map((item) => (
          <li key={item.id}>
            name: {item.name} | email: {item.email}
          </li>
        ))}

Answer 1

将 useState 更改为： const [loading, setLoading] = useState(true); 在 useEffect 未定义代码之前首次加载 App 函数 return。

如果还是不行，在访问prop之前加上问号。像这样：

<ul>
     {items?.map((item) => (
        <li key={item?.id}>
            name: {item?.name} | email: {item?.email}
         </li>
     ))}
</ul>

添加问号使其可选。

Answer 2

您需要先将响应转换为json，然后设置为状态。

fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json()).then((data) => {
        setItems(data);
      })

来自 documentation，fetch 而不是 直接 return JSON 响应主体，而是 return这是一个用 Response 对象解析的承诺。 Response 对象 而不是 直接包含实际的 JSON 响应主体，而是整个 HTTP 响应的表示。因此，要从 Response 对象中提取 JSON 正文内容，请使用 json() 方法，该方法 return 是第二个 promise，它解析响应正文文本的结果为 JSON.

Answer 3

您好，请查看 json 占位符文档，您需要先使用 json() 转换响应，然后像这样获取

  useEffect(() => {
    setLoading(true);
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => { 
        return response.json() // return response.json() first
      })
      .then((json) => { 
        setItems(json) // then set the json into the items
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

如果不首先将其转换为 json，则设置响应对象而不是 json 数组

Answer 4

Fetch returns a response 在使用前需要转换成 JSON。

fetch('https://jsonplaceholder.typicode.com/users')
  .then((res) => {
    res.json();
  })
  .then((items) => {
    setItems(items);
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    setLoading(false);
  });

Answer 5

检查此代码

 useEffect(() => {
    const fetchData = async() => {
    setLoading(true)
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await res.json();
    setLoading(false);
    setItems(data);
    }
    fetchData()

  }, []);

Answer 6

尝试使用以下代码：

<ul>
  {items?.map((item) => (
    <li key={item?.id}>
      name: {item?.name} | email: {item?.email}
    </li>
  ))}
</ul>

地图函数错误：无法在反应 js 中读取未定义的属性（读取 'map'）

Error on the map function: Cannot read properties of undefined (reading 'map') in react js

javascript

api

reactjs