React js 应用程序 - 使用类组件中函数的返回值设置功能组件的状态(错误：未定义)

Question

我在 React 中有一个日历应用程序，后端是从 Core 中的现有日历应用程序创建的 ASP.NET。我配置了代理并且 API 工作正常，我可以记录通过 fetch 导入的内容。为了存储和解析来自JSON的数据，我创建了类MonthOfEvents和Event(对于每月的每一天都有一个事件数组(。 下面是 MonthOfEvents 类：

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

事件类暂时无关紧要，但这些是普通类，所有其他类都是功能组件。我为 monthOfEvents 创建了一个状态，在第一次获取期间，我尝试将该状态设置为 MonthOfEvents 类中的 getFromJSON 函数返回的状态。问题是：这个 MonthOfEvents 中数据变量的事件列表未定义，我无法弄清楚原因。 以下是 App.js 组件的一部分：

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])

API 的输出示例(仅通过记录 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

由于此错误，我被卡住了：

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

它的发生是因为这一行：

setMonthOfEvents(MonthOfEvents.getFromJSON(data))

这是我在 React 中的第一个项目，我不知道如何处理这个问题。

Answer 1

你的第一个循环走得太远了，因为数组索引从 0 开始，在 arraySize -1 结束。 因此，在最后一个循环(i == json.events.length(中，你的json.events[i]undefined抛出错误消息(undefined没有length方法(。

若要解决此问题，请将运算符<=替换为<

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