类型错误：解析数组时 LIST.map 不是 function

Question

React is complaining about TypeError: LIST.map is not a function in my code below:

class MyCarousel extends React.Component {

  constructor(props, context) {
    super(props);
    this.state = {
        listOfClasses: []
  }
}

  componentDidMount = () => {
    this.setState({listOfClasses: this.props.list})
  }

    render() {
        const responsive = {
            desktop: {
              breakpoint: { max: 3000, min: 1024 },
              items: 4,
              slidesToSlide: 1 // optional, default to 1.
            },
            tablet: {
              breakpoint: { max: 1024, min: 600 },
              items: 3,
              slidesToSlide: 1 // optional, default to 1.
            },
            mobile: {
              breakpoint: { max: 600, min: 0 },
              items: 1,
              slidesToSlide: 1 // optional, default to 1.
            }
          };
        

          const LIST = this.state.listOfClasses || [];

         
        return (

              <Carousel>
              {
                LIST.map((classitem) => 
                  <div>
                      <ClassCard title={classitem.title} desc={classitem.desc} pic={classitem.classpic[0]} id={classitem.id}></ClassCard>
                  </div>
                  )
              }
              </Carousel>
          
        );
    }
  
}

export default MyCarousel;

listOfClasses is coming from the props list sent by the code below:

class Discover extends React.Component {
    

    createSectionWithClasses = (title, classList) => {
        return <div> 
            <h2> {title} </h2>
            <MyCarousel list={classList} />
            </div>;
    }

    render() {
        return (
            <div className = "discover-container">
                <h1> Discover a world of growth </h1>
                {Constants.categoryList.map((e) =>  { 
                                  return this.createSectionWithClasses(e.name, ClassDataUseCase.getAllClasses)                       
                              })}
            </div>);
    }
    
}

classList is an JSON Array get by ClassDataUseCase.getAllClasses which just a JSON.parse(myjson)

the JSON.parse is parsing a json array as below:

static getAllClasses() {
        return JSON.parse(ClassDetailsData.Classes)
    }

and ClassDetailsData is

class ClassDetailsData {
    static Classes = [{
            "id": "c000001",
            "title": "Cook like a chef",
            "price": "5",
            "teacher": "Arthur Patrick",
            "teacherpic": "https://cdn.pixabay.com/photo/2015/03/03/08/55/portrait-657116_1280.jpg",
            "teacherid": "u0000000001",
            "desc": "Always want to learn to cook, that's the place you need to be",
            "bring": "Your fun , your motivation and you",
            "tags": [],
            "address": {
                "id":"",
                "Name": "Joel Robuchon",
                "address1": "3799 S Las vegas boulevard",
                "address2": "",
                "city": "las vegas",
                "county": "Clark",
                "zip": "89109",
                "state": "Nevada",
                "country": "United States"
            },
            "date": "2021/09/01",
            "time": "1:00PM",
            "duration": "2",
            "classpic": ["https://cdn.pixabay.com/photo/2014/06/16/23/10/spice-370114_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/08/13/18/47/spices-887348_1280.jpg", 
            "https://cdn.pixabay.com/photo/2015/04/20/13/30/kitchen-731351_1280.jpg",
            "https://cdn.pixabay.com/photo/2015/07/02/10/40/writing-828911_1280.jpg"],
            "reviews": [{
                "name": "Gabby Caldwell",
                "profilePic":"https://cdn.pixabay.com/photo/2015/03/03/08/55/portrait-657116_960_720.jpg",
                "rate": "5",
                "total_review": "13",
                "text": "Rachel was such a kind and knowledgeable guide. She took us to see some hidden coves that a lot of tourists probabaly miss. I’m keeping the map I made FOREVER!!!"
            }],
        }, 
        {
            ....
        },
        {
           ....
        },
        {
           ....
        }, 
        {
...,
        },
        ]
}

export default ClassDetailsData;

Any idea why I have this error?

thanks

Answer 1

I would suggest to console.log this.props.list . ClassDataUseCase.getAllClasses seems like a function (by its name), maybe you just forgot to call it. Change this:

... return this.createSectionWithClasses(e.name, ClassDataUseCase.getAllClasses)

to this:

... return this.createSectionWithClasses(e.name, ClassDataUseCase.getAllClasses())