Данные React fetch API не отображаются

У меня есть простой запрос на выборку, который выполняется только при первом рендеринге. Когда я обновляю состояние данными и пытаюсь сопоставить его, ничего не отображается. Для справки, данные, которые мне вернули, - это всего лишь одна запись. Используя .map, он должен для каждой записи (которая равна 1) отображать маркер, но ничего не отображается.

{quote: "I'm the new Moses"}
import logo from './logo.svg';
import {useState,useEffect} from 'react';
import './App.css';

function App() {
  const [users, setUsers] = useState([])

  const fetchData = () => {
    fetch("https://api.kanye.rest/")
      .then(response => {
        return response.json()
      })
      .then(data => {
        console.log(data)
        setUsers(data)
      })
  }

  useEffect(() => {
    fetchData()
  }, [])

  return (
    <div className="App">
      <body className='App'>
        <div>
          {users.length > 0 && (
            <ul>
              {users.map(user => (
               <li>{user.quote}</li>
          ))}
        </ul>
      )}
    </div>
      </body>
    </div>
  );
}

export default App;
{quote: "I'm the new Moses"} — это объект, а не массив. Это не может быть нанесено на карту.
Drew Reese 09.04.2022 10:08

Этот API возвращает объект, а не массив, поэтому users.length > 0 всегда ложно, поэтому он не будет отображаться.

Cuong Vu 09.04.2022 10:09
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
2
33
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Значение ответа {quote: "I'm the new Moses"} — это объект, а не массив. Это не может быть нанесено на карту.

Поместите значение ответа в массив при сохранении.

const fetchData = () => {
  fetch("https://api.kanye.rest/")
    .then(response => {
      return response.json();
    })
    .then(data => {
      console.log(data);
      setUsers([data]);
    });
};

Упс, не заметил этого раньше, спасибо!

ISimpforJesus 10.04.2022 04:02

@ISimpforJesus Не беспокойтесь. Здоровья и удачи!

Drew Reese 10.04.2022 06:04

В результате вы получили не массив, а объект. Это не может быть нанесено на карту. Однако вы можете добиться ожидаемого поведения разными способами. Один из них просто помещает данные в массив при настройке пользователя.

setUsers([data])

Другие вопросы по теме