TypeError: .map is not a function - React application

Question

我创建了这个 React 应用程序来练习获取 API。但是，在编写通过 map 方法在浏览器上显示数据的代码时，我收到错误消息“TypeError: profile.map is not a function”。下面是代码：

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

function App() {
  // https://reqres.in/api/users
  const [profile, setProfile] = useState([]);
  const [loading, setLoading] = useState(false);

  const getProfile = async () => {
    setLoading(true);
    const response = await fetch("https://reqres.in/api/users");
    const data = await response.json();
    setProfile(data);
    setLoading(false);
  };

  useEffect(() => {
    getProfile();
  }, []);

  return (
    <Fragment>
      <h1>React fetch</h1>
      <div className="main">
        <section className="section">
          <h2>Get database</h2>
          <div>
            {loading ? (
              <Fragment>loading..</Fragment>
            ) : (
              profile.map(i => {
                <Fragment>
                  <ul>
                    <li>{i.id}</li>
                    <li>{i.email}</li>
                    <li>{i.first_name}</li>
                    <li>{i.last_name}</li>
                    <li>
                      <image src={i.avatar} />
                    </li>
                  </ul>
                </Fragment>;
              })
            )}
          </div>
        </section>
        <form className="section">
          <h2>Post data</h2>
          <input type="text" placeholder="enter detail" />
          <button type="submit">Post</button>
        </form>
        <form className="section">
          <h2>Update data</h2>
          <select>
            <option>Choose data</option>
          </select>
          <input type="text" placeholder="enter detail" />
          <button type="submit">Update</button>
        </form>
      </div>
    </Fragment>
  );
}

export default App;

为什么无法识别地图？

Answer 1

地图需要return一个值。

        {loading ? (
          <Fragment>loading..</Fragment>
        ) : (
          profile.map(i => {
           return (
            <Fragment>
              <ul>
                <li>{i.id}</li>
                <li>{i.email}</li>
                <li>{i.first_name}</li>
                <li>{i.last_name}</li>
                <li>
                  <image src={i.avatar} />
                </li>
              </ul>
            </Fragment>;
            )
          })
        )}

此外，您不能在对象上使用地图功能。看起来您的响应是一个对象，您要查找的是响应中的数据。试试这个...

setProfile(data.data);

Answer 2

我相信这是因为 .map 是数组原型的方法，而不是对象的方法 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

您可以 return 通过使用 data.data 而不是仅数据

来自对象的数组：

...
  const getProfile = async () => {
    setLoading(true);
    const response = await fetch("https://reqres.in/api/users");
    const data = await response.json();
    setProfile(data.data); // probably a safer way to do this, but if you console.log(data) you'll see an object is being returned, not an array. 
    setLoading(false);
  };
...

Answer 3

因此，const data = await response.json();执行此行后，我们在数据常量中获得的结果是一个对象。我们只能在数组上使用 MAP 函数，而不能在对象上使用。而且您实际搜索的配置文件数据位于数据“常量”的“数据”键内。所以在设置配置文件数据时，只需使用 setProfile(data.data);.

一条建议：Use this Chrome Extension for viewing the API data. It indents the json objects automatically

TypeError: .map is not a function - React application

TypeError: .map is not a function - React application

crud

fetch

reactjs

fetch-api