无法使用 react-slider 在我的反应应用程序中显示动态滑块

如何解决无法使用 react-slider 在我的反应应用程序中显示动态滑块

我正在尝试使用 react-slider 在我的 React 应用程序中显示一个滑块，我正在从我的后端服务器获取动态数据，该服务器已启动并正在运行并在 React 应用程序的其他地方显示数据。 我正在使用 map 函数来呈现数据，但我无法显示它

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,initialSlide: 2,{
      breakpoint: 480,settings: {
        slidesToShow: 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;

我收到以下错误编译失败。 src\components\home\Carousel.js 第 61:23 行：'novel' 未定义 no-undef
第 62:18 行：'novel' 未定义 no-undef
搜索关键字以详细了解每个错误。