Блог

Главная - Вопросы по программированию - Ошибка типа: .map не является приложением, реагирующим на функции

Ошибка типа: .map не является приложением, реагирующим на функции

#reactjs #fetch #crud #fetch-api

Вопрос:

Я создал это приложение React, чтобы практиковать API выборки. Однако при написании кода для отображения данных в браузере с помощью метода карты я получил сообщение об ошибке «Ошибка типа: профиль.карта не является функцией». Ниже приведен код:

 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;

Почему карта не распознается?

Комментарии:

1. Потому data что in setProfile(data); — это не массив. Если вы опубликуете ответ data здесь в вопросе, я уверен, что вы его узнаете.

2. @choz У меня есть только одна страница в этом проекте, и API от » reqres.in/api/users »

3. Внимательно ознакомьтесь с предоставленным вами URL-адресом. Это не массив.

Ответ №1:

Я считаю, что это потому, что .map-это метод для прототипов массивов, а не для объектов (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

Вы можете вернуть массив из объекта, используя 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);
  };
...

Ответ №2:

Карта должна возвращать значение.

         {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>;
            )
          })
        )}

Кроме того, вы не можете использовать функцию map для объекта. Похоже, что ваш ответ-это объект, то, что вы ищете, — это данные из ответа. Попробуй это…

 setProfile(data.data);

Комментарии:

1. это не имело никакого значения

Ответ №3:

Итак, const data = await response.json(); после выполнения этой строки результат, который мы получаем внутри константы данных, является объектом. Мы можем использовать функцию MAP только для массивов, а не для объектов. А также данные профиля, которые вы на самом деле ищете, находятся внутри ключа «данные» в разделе «константа данных». Поэтому при настройке данных профиля просто используйте setProfile(data.data); .

A предложения: Используйте это расширение Chrome для просмотра данных API. Он автоматически делает отступы для объектов json

Метки: ,