React js app - 使用 class 组件中 function 的返回值设置功能组件的 state （错误：未定义）

Question

I have a calendar app in React with backend created from an existing calendar app in ASP.NET Core. I configured the proxy and the API works fine, I can log the contents which were imported through fetch. To store and parse data from JSON I created classes MonthOfEvents and Event (for each day of the month there is an array of events). Here is the MonthOfEvents class:

import { getYear, getMonth, getDaysInMonth } from 'date-fns'
import Event from './Event'

class MonthOfEvents {

    // contains lists of events for each day of the month
    constructor(year, month) {
        // if year and month not specified - use current month
        if(!year || !month) {
            const today = new Date()
            this.year = getYear(today)
            this.month = getMonth(today)
        }
        else {
            // add error handling
            this.year = year
            this.month = month
        }

        this.events = [null]
        // array of arrays of events - an array for each day of the month
        for(let i = 0; i < getDaysInMonth(new Date(year, month, 1)); i++) {
            (this.events).push([])
        }
    }

    static getFromJSON(json) {
        let eventsArray = new MonthOfEvents(json.year, json.month)
        console.log("eventsArray.year: " + eventsArray.year)
        console.log("eventsArray.month: " + eventsArray.month)
        console.log("eventsArray.events: " + eventsArray.events)

        for(let i = 0; i <= json.events.length; i++) {
            for(let j = 0; j < json.events[i].length; j++) {
                const id = json.events[i][j].id
                const description = json.events[i][j].description
                eventsArray.events[i].push(new Event(id, new Date(0), description))
            }
        }
        console.log("getFromJSON: eventsArray: "+eventsArray)
        return eventsArray
    }

}

export default MonthOfEvents

Event class doesn't matter for now, but these are normal classes and all others are functional components. I created a state for the monthOfEvents and during the first fetch I'm trying to set that state to what getFromJSON function in MonthOfEvents class returns. The problem is: the events list from data variable in this MonthOfEvents is undefined and I can't figure out why. Here is part of the App.js component:

import React, { useState, useEffect } from 'react';
import Calendar from './Calendar'
import DayEditor from './DayEditor'
import EventEditor from './EventEditor'
import { format, getMonth, getDay, getDaysInMonth, getDate, getYear, parseISO} from 'date-fns'
import MonthOfEvents from '../datacomponents/MonthOfEvents';

function App() {

  console.log("render")

  const [year, setYear] = useState(getYear(new Date()))
  const [month, setMonth] = useState(getMonth(new Date()))
  const [currentDate, setCurrentDate] = useState(new Date())
  const [activeComponent, setActiveComponent] = useState(
    <Calendar
      date={currentDate}
      getNextMonth={getNextMonth}
      getPrevMonth={getPrevMonth}
      handlePick={handlePick}
    />)
    const [onPick, setOnPick] = useState(false)
    const [pickedDate, setPickedDate] = useState()
    //const [fetching, setFetching] = useState(false)
    const [monthOfEvents, setMonthOfEvents] = useState( new MonthOfEvents() )

    console.log(currentDate)

    useEffect(() => {
      console.log("FETCH")
      // API call
      fetch(`api/events/${format(currentDate, "yyyy-M")}`)
        .then(response => response.json())
        .then(data => {
          console.log(data)
          setMonthOfEvents(MonthOfEvents.getFromJSON(data))
        })
    }, [currentDate])

Example of the output from API (just from logging the data object in fetch):

{status: "ok", year: 2020, month: 6, events: Array(31)}
events: (31) [Array(0), Array(0), Array(0), Array(2), Array(0), Array(1), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0), Array(0)]
month: 6
status: "ok"
year: 2020

I am stuck because of this error:

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
    at Function.getFromJSON (MonthOfEvents.js:45)
    at eval

and it occurs because of this line:

setMonthOfEvents(MonthOfEvents.getFromJSON(data))

It's my first project in React and I have no idea what to do about this problem.

Answer 1

Your first loop is going too far because array index starts at 0 and ends at arraySize -1. Therefore, in your last loop (i == json.events.length), your json.events[i] is undefined which throws the error message (undefined does not have length method).

To fix this, replace the operator <= by <

 for(let i = 0; i < json.events.length; i++) {