Question

我正在使用React.js创建一个调度应用程序，并且具有一个调度接口，用户应该使用可拖动的调度功能选择其可用性。该功能正常运行，除非出现一条错误消息：TypeError：无法将属性“ schedule”设置为null。

'schedule'数组是我要放置调度数据的位置，但是我将其初始化为[]，因为它最初没有设置长度（应该由用户决定）。我已经在StackOverflow上阅读过类似的错误消息，但它们似乎并不能帮助解决我的特定问题。

以下是带有错误消息的相关代码：

import Welcome from "../../../components/welcome";
import React, {useRef, useState} from "react";
import {useAuth} from "../../../lib/authlib";
import {post} from "../../../lib/reqlib";
import {useRouter} from "next/router";
import {session} from "../../../lib/usertypes";
import DraggableSchedule from "../../../components/tutor/draggableschedule";
import TimezoneSelect from "react-timezone-select";
import {stringToOffset} from "../../../lib/timezonelib";
import Head from "next/head";
import {getTitle} from "../../../lib/headerlib";
import Notification from "react-notifications"

export default function WelcomeTutorSchedule() {
    const auth = useAuth();
    const router = useRouter();
    const welcomeRef = useRef<{ setIsLoading: (boolean) => void }>();
    const scheduleRef = useRef<{ getSessions: () => [session] }>();
    const [timezone, setTimezone] = useState<{ label: string, value: string }>({
        value: "America/Detroit",
        label: "(GMT-4:00) Eastern Time (US and Canada)",
    });

    function onSubmit(e) {
        e && e.preventDefault();

        const offsetFinal: number = stringToOffset(timezone.label);

        const selectedSessions = scheduleRef.current.getSessions().slice(0).filter(s => s.selected);

        let scheduleObj = [];

        for (let i = 0; i < 7; i++) {
            let dayScheduleObj = [];
            const daySessions = selectedSessions.slice(0).filter(s => (s.day + 6) % 7 === i);
            for (const session of daySessions) {
                dayScheduleObj.push({
                    "offset": session.time * 60,
                    "duration": 0.5 * 60
                })
            }
            scheduleObj.push({
                "schedule": dayScheduleObj
            });
        }

        post(`tutor/update`, null, {
            "id": auth.userInfo.user_id,
            "default_schedule": {
                "schedule": scheduleObj,
            },
            "timezone_offset": offsetFinal,
        }, auth).then(() => {
            let newProfileInfo = auth.getProfileInfo();
            newProfileInfo["default_schedule"]["schedule"] = scheduleObj;
            auth.updateProfileInfo(newProfileInfo);
            router.push("/tutor/welcome/w9");
        }).catch(e => {
            console.log(e);
        });
    }

    return (
        <>
            <Head>
                <title>{getTitle("Set schedule")}</title>
            </Head>
            <Welcome backlink="/tutor/welcome/subjects" nextfunc={onSubmit} ref={welcomeRef}>
                <form onSubmit={onSubmit} className="tt-form">
                    <label className="label">When are you available?</label>
                    <p className="support my-4">Clients will be able to book sessions with you during any slot you mark
                        as available. You can always change this later.</p>
                    <p className="support mb-8">Click and drag over time slots to mark them as either available
                        (highlighted) or unavailable (blank) for booking.</p>
                    <DraggableSchedule ref={scheduleRef}/>
                    <label className="label">What timezone are you in?</label>
                    <TimezoneSelect value={timezone} onChange={data => setTimezone(data)}/>
                </form>
            </Welcome>

            <Notification>You have surpassed the maximum hours this tutor is willing to work in a given period.</Notification>
            
        </>
    )
}

错误消息是：“ TypeError：无法将属性'schedule'设置为null 在评估时（schedule.tsx？8f51：55）”

在控制台中，此错误发生在以下行：

newProfileInfo["default_schedule"]["schedule"] = scheduleObj;

有关如何解决此问题的任何想法？我觉得解决方案是如此明显，但是我只是在这里遗漏了一些东西。任何帮助将不胜感激。

谢谢

Answer 1

您是否检查了对象 newProfileInfo [“ default_schedule”] ，看来该对象为空。

因此，当您尝试查找“时间表”对象时会出现错误

TypeError：无法将属性“ schedule”设置为null

1 个答案: