Запрос данных из фейк API с помощью fetchAll

Question

У меня есть фейк API c выводом данных через fetchAll

const users = [
    {
        _id: 'id1fd3b2a30163',
        name: 'Эндре Хифон'
    },
    {
        _id: 'id6130f39a3d55b',
        name: 'Факир Валунтас'
    },
    {
        _id: 'ide72070fe6000d',
        name: 'Клаус Кэнтерберийский'
    }
    ]

const fetchAll = () =>
    new Promise((resolve) => {
        window.setTimeout(function () {
            resolve(users)
        }, 2000)
    })

export default {
    fetchAll
}

Далее данные приходят в компонент

import React, { useEffect, useState } from 'react'
import api from '../api'

const Authors = () => {
    const [users, setUsers] = useState([])

useEffect(() => {
        api.users.fetchAll().then((data) => setUsers(data))
    }, [])
return (
<div>
{users.map((user) => (
  <div key={user._id}>
    <h1>{user.name}</h1>
  </div>
)}
</div>
}

Но мне приходит ошибка

_api__WEBPACK_IMPORTED_MODULE_1__.default.users.fetchAll is not a function
TypeError: _api__WEBPACK_IMPORTED_MODULE_1__.default.users.fetchAll is not a function

Я не могу понять в чем проблема. Может кто подсказать? Извините, если пример не идеально написан. Поправьте меня если считаете нужным.

Answer 1

Судя по ошибке, у вас нет метода fetchAll у объекта users.

В своём файле замените тот кусок кода, который у вас в вопросе, таким:

const users = [
    {
        _id: 'id1fd3b2a30163',
        name: 'Эндре Хифон'
    },
    {
        _id: 'id6130f39a3d55b',
        name: 'Факир Валунтас'
    },
    {
        _id: 'ide72070fe6000d',
        name: 'Клаус Кэнтерберийский'
    }
    ]

const fetchAll = () =>
    new Promise((resolve) => {
        window.setTimeout(function () {
            resolve(users)
        }, 2000)
    })

// тут добавляем функцию fetchAll как метод объекту users
users.fetchAll = fetchAll;

export default {
    fetchAll
}

В вышеприведённом примере используется вариант присвоения свойства объекту. Свойство и его название может быть любым.

Answer 2

Решение найдено. Проблема в экспорте. Надо было написать так

export const fetchAll = () =>
    new Promise((resolve) => {
        window.setTimeout(function () {
            resolve(users)
        }, 2000)
    })

БЛОГ НА HUSL

Запрос данных из фейк API с помощью fetchAll

Ответы (2 шт):