Рендеринг списка в React не заполняет никакие элементы в DOM

У меня есть список объектов, которые я хочу отобразить в функции компонентов return. Однако почему-то вообще ничего не рендерится.

Я слежу за этим официальное руководство по React

const DashboardOffers = () => {

    // Get queryset of Offers
    let qs_offers = []
    fetch('http://127.0.0.1:8000/api/offer/', {
            method: 'GET',
            headers: {'Content-Type': 'application/json'},
        })
        .then(res => res.json())
        .then(result => {
            qs_offers = result
            console.log(qs_offers)
        })

    // Create array of objects to render
    const offer_items = qs_offers.map((offer) =>
        <div>{offer.identifier}</div>
    );

    return (
        <div>{offer_items}</div>
    )
}
export default DashboardOffers
Формы 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 вы передаете состояние или данные от одного...
0
0
15
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Превратите его в компонент хука,

https://reactjs.org/docs/hooks-overview.html

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. (We don’t recommend rewriting your existing components overnight but you can start using Hooks in the new ones if you’d like.)

const DashboardOffers = () => {
  const [offers, setOffers] = useState([]);
  // Get queryset of Offers
  useEffect(() => {
    let qs_offers = []; // possibly not needed.
    fetch("http://127.0.0.1:8000/api/offer/", {
      method: "GET",
      headers: { "Content-Type": "application/json" },
    })
      .then((res) => res.json())
      .then((result) => {
        setOffers([...offers, result])
        console.log(qs_offers);
      });
  }, [offers]); // optional

  // Create array of objects to render
  const offer_items = qs_offers.map((offer) => <div>{offer.identifier}</div>);

  return <div>{offer_items}</div>;
};
export default DashboardOffers;

Приятно, что работает! Спасибо. Один вопрос: есть ли структура для помещения fetch в хук useEffect?

Jonas 09.04.2022 22:05

Да, это самый идеальный и распространенный способ получения вызовов.

BARNOWL 09.04.2022 22:07

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