Reactjs 使用React钩子，为什么即使我设置了state，课程列表也没有呈现在页面上？

我正在学习用React钩子应用多重过滤函数，我真的迷路了。其想法是，当页面呈现时，用户应该能够看到所有列表，并且用户可以按语言和日期范围进行过滤。。。我已经尝试了许多不同的方法，我真的需要帮助调试这个。要么列表显示，但过滤器不起作用，要么过滤器起作用，但课程列表不显示。我一直在学习React钩子和useEffect的使用，但找不到一种方法来实现这一点

  const index = ({ courseList }) => {
  const classes = useStyles()
  const [sortedCourses, setSortedCourses] = useState(courseList)
  const [language, setLanguage] = useState('')
  const [startDate, setStartDate] = useState(new Date())
  const [endDate, setEndDate] = useState(new Date())
  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };


  const handleLanguageClick = (event) => {
    setLanguage(event.target.value)
    if (event.target.value === 'all' || null) {
      setSortedCourses(courseList)
    } else {
      setSortedCourses(courseList.filter((course) => {
        return course.language === event.target.value
      }))
    }
  }

  useEffect(()=>{
    setSortedCourses(courseList)
  }, [courses])

  useEffect(()=>{
    filterDates()
  }, [startDate, endDate])

  const handleStartDateClick = (selectedDate) => {
    setStartDate(selectedDate)
    }
    
    const handleEndDateClick = (value) => {
      setEndDate(value)
      }
      
    const filterDates = () => {
        const sDateInput = moment(startDate).format('L')
        const eDateInput = moment(endDate).format('L')
       setSortedCourses(courseList.filter(course => {
          const sdate = course.startDate
          const edate = course.endDate
          return sdate >= sDateInput && edate <= eDateInput
      }))   
      }

  const handleClearButton = () => {
    setSortedCourses(courseList)
    setLanguage('')
    setStartDate(new Date())
    setEndDate(new Date())
  }

  return (
    <Container component='main'>
      <Grid container alignItems='center' justify='center'>
        <img className={classes.mainImage} alt="main image" src='/pic.jpg' />
      </Grid>
      <Grid className={classes.header} container alignItems='center' justify='center'>
        <Typography variant="h5" >ALL COURSES</Typography>
      </Grid>
      <Grid className={classes.header} container alignItems='center' justify='center'>
        <Typography variant="subtitle1" >Short Description here</Typography>
      </Grid>
      {/* FILTER */}
      <Grid container xs={12} alignItems='center' justify='flex-end'>
      <Grid item>
      <Typography>FILTER COURSES</Typography>
      </Grid>
      <Grid item>
      <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: expanded
          })}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
      </IconButton>
     </Grid>
      </Grid>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
      <Grid container justify='space-evenly' spacing={5} alignItems='center' >
        <StartDatePicker handleStartDateClick={handleStartDateClick} startDate={startDate}/>
        <EndDatePicker handleEndDateClick={handleEndDateClick} endDate={endDate} />
        <LanguageDropdown handleLanguageClick={handleLanguageClick} language={language} classes={classes} />
        <Button variant="contained" onClick={handleClearButton}> Clear Filter </Button>
      </Grid>
      </Collapse>

      <br /><br />

      {/* COURSE CARDS */}
      <Grid container spacing={5} alignItems='flex-end'>   
          {sortedCourses.map((course) => (
          <Grid item key={course.id} xs={12} sm={6} md={4} >
            <CourseCard key={course.id} {...course} />
          </Grid>))}
      </Grid>
    </Container >
  )
}

index.propTypes = {
  courseList: PropTypes.array.isRequired
}

export default index

const index=（{courseList}）=>{
常量类=useStyles（）
常量[sortedCourses，setSortedCourses]=useState（courseList）
const[language，setLanguage]=useState（“”）
常量[startDate，setStartDate]=useState（新日期（））
const[endDate，setEndDate]=useState（新日期（））
const[expanded，setExpanded]=React.useState（false）；
常量handleExpandClick=（）=>{
setExpanded（！expanded）；
};
常量handleLanguageClick=（事件）=>{
setLanguage（event.target.value）
if（event.target.value=='all'| | null）{
设置分类课程（课程列表）
}否则{
setSortedCourses（courseList.filter）（（课程）=>{
return course.language==event.target.value
}))
}
}
useffect（（）=>{
设置分类课程（课程列表）
}，[课程]）
useffect（（）=>{
过滤级（）
}，[startDate，endDate]）
常量HandleStartDate单击=（selectedDate）=>{
设置开始日期（selectedDate）
}
常量handleEndDateClick=（值）=>{
setEndDate（值）
}
常量过滤器日期=（）=>{
const sDateInput=力矩（起始日期）。格式（'L'）
常量eDateInput=时刻（结束日期）。格式（'L'）
setSortedCourses（courseList.filter）（课程=>{
const sdate=course.startDate
const edate=course.endDate
返回sdate>=sDateInput&&edate{
设置分类课程（课程列表）
设置语言（“”）
设置开始日期（新日期（））
setEndDate（新日期（））
}
返回(
所有课程
这里有简短的描述
{/*过滤器*/}
滤层
透明过滤器



{/*课程卡*/}
{sortedCourses.map（（课程）=>(
))}
)
}
index.propTypes={
课程列表：需要PropTypes.array.isRequired
}
导出默认索引

课程

在第一个效果的依赖项数组中没有在代码段中的任何位置定义。此外，您的默认状态似乎是使筛选开始日期和结束日期等于当前日期，因此，除非课程的开始日期和结束日期完全匹配，否则它将在默认情况下被筛选出来。