Блог

Я пытаюсь отобразить слайдер в своем приложении react с помощью react-слайдера, я получаю динамические данные с моего внутреннего сервера, который запущен и работает и отображает данные в другом месте приложения react. Я использую функцию карты для отображения данных, но я не могу их отобразить

 import React, { Component } from 'react';
import Carousel from 'react-bootstrap/Carousel';
import axios from 'axios';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { Container } from 'react-bootstrap';

class CarouselMain extends Component {
  state = {
    novels: [],
  };

  componentDidMount() {
    axios.get('http://localhost:5000/novels/').then((response) => {
      //console.log(response);
      //console.log(this.props);
      this.setState({ novels: response.data });
    });
  }
render() {
const settings = {
  dots: true,
  infinite: false,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,
  initialSlide: 0,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
      },
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        initialSlide: 2,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
  ],
};
return (
  <Slider {...settings}>
    const novels = this.state.novels.map((novel) =>
    {
      <div>
        <img src={novels.image} alt="" />
        <h1>{novels.title}</h1>
      </div>
    }
    )
  </Slider>
 );
}
}

export default CarouselMain;
 

Я получаю следующую ошибку: Не удалось скомпилировать. srccomponentshomeCarousel.js Строка 61:23: «романы» не определено нет-не определено Строка
62:18: «романы» не определено нет-не определено Поиск
по ключевым словам, чтобы узнать больше о каждой ошибке.