javascript - 未捕获的类型错误：无法在 useAutocomplete 读取未定义的属性（读取“过滤器”）

Question

我想要做的是允许用户从下拉列表中单击以将当前选择（in courses）保存到计划中，其中的列表应该在schedules. 底部有一个名为“保存”的永久选项，上面的其他项目应从schedules列表中动态填充。

设置课程工作正常，但单击下拉按钮保存新时间表会抛出：

Uncaught TypeError: Cannot read properties of undefined (reading 'filter')
    at useAutocomplete (useAutocomplete.js:242)
    at Autocomplete (Autocomplete.js:386)
    at renderWithHooks (react-dom.development.js:14803)
    at updateForwardRef (react-dom.development.js:16816)
    at beginWork (react-dom.development.js:18645)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at discreteUpdates$1 (react-dom.development.js:21893)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

我在另外两个并行文件中使用了 AutoComplete 组件，它们都直接继承courses和setCourses。它会发现courses空然后抛出错误吗？谢谢！

应用程序.js

const [courses, setCourses] = useState([]); // currently selected courses on schedule
const [schedules, setSchedules] = useState([]); // list of schedules
...
const handleSchedulesChange = (args) => {setSchedules(args)}
const handleCoursesChange = (args) => {setCourses(args)}
...
{ ScheduleSelect({courses, handleCoursesChange, schedules, handleSchedulesChange}) }

ScheduleSelect.js

const ScheduleSelect = ({courses, handleCoursesChange, schedules, handleSchedulesChange}) => {

  const setSchedulesLocal = (arg) => handleSchedulesChange(arg);
  const setCoursesLocal = (arg) => handleCoursesChange(arg);

  const scheduleMenuItems = schedules.map((schedule, index) => {
    return (
      <MenuItem
        value={index}
      >
        <ListItemIcon>
          <Cloud fontSize="small" />
        </ListItemIcon>
        <ListItemText>Cut</ListItemText>
        <Typography variant="body2" color="text.secondary">
          ⌘X
        </Typography>
      </MenuItem>
    );
  })

  const [selectedScheduleIndex, setSelectedScheduleIndex] = React.useState(0);

  const updateSchedule = (event) => {
    const val = event.target.value ? event.target.value : 0;
    setSelectedScheduleIndex(val);
    setCoursesLocal(schedules[val]);
  }

  const saveSchedule = (e) => {
    e.preventDefault();
    const newSchedules = [...schedules];
    newSchedules.push([courses]);
    setSchedulesLocal(newSchedules);
    setSelectedScheduleIndex(newSchedules.length > 0 ? newSchedules.length - 1 : 0);
  }

  return (
    <div className="schedule-select">
      <FormControl fullWidth>
        <Select
          value={selectedScheduleIndex}
          onChange={event => updateSchedule(event)}
        >
          {scheduleMenuItems}
          <Divider />
          <MenuItem
            onClick={(e) => {saveSchedule(e)}}
          >
            <ListItemIcon>
              <Cloud fontSize="small" />
            </ListItemIcon>
            <ListItemText>Save this schedule</ListItemText>
          </MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

标签： javascriptreactjsreact-hooks