React如何基于state值动态显示组件？日历单日单事件校验实现问题

问题修复说明 #

你的代码存在5个核心问题导致单日校验逻辑不生效，逐一修复即可：

• 事件列表state更新逻辑错误：你定义eventList为数组，但提交事件时直接把单个事件对象赋值给了eventList，导致后续find方法找不到数组原型直接报错，要改成数组追加的写法
• 变量名不统一：
  • 日历组件中声明的控制预览弹窗的state是overviewForm，但渲染判断时写的是overviewShown，变量对不上导致弹窗无法显示
  • 调用Event组件时传的props是listEvent，但Event组件内部接收的参数是list，参数不匹配导致无法渲染事件
• Event组件缺少return语句，写的JSX不会被渲染
• 表头渲染变量错误：定义的星期数组是monthsData，但map时用的是未声明的month变量
• 提交事件后未关闭新建表单弹窗，会停留在表单页

修正后代码 #

提交函数

const submitHandle = (e) => {
      e.preventDefault();

      if(!eventName) {
          alert("Please Enter a name for Your Event")
          return
      }
      // 提交前二次校验，避免重复提交
      const isDuplicate = eventList.some(event => event.day === keyDay)
      if(isDuplicate) {
        alert("该日期已存在事件，单日仅可创建一个事件")
        return
      }
      const newEvent = {id : new Date().getTime().toString(), title: eventName, day : keyDay}
      // 数组追加新事件，不可直接覆盖原数组
      setEventList(prev => [...prev, newEvent]);
      setEventName("");
      // 提交后关闭新建表单
      showEventFrom(false)
    };

事件展示组件

import React from 'react'

const Event = ({listEvent, currentDay}) => {
    // 仅渲染当前选中日期的事件，无需遍历全部事件
    const targetEvent = listEvent.find(item => item.day === currentDay)
    return (
        <article className="event-pop-up" key={targetEvent.id} >
            <h1>Event : {targetEvent.title} </h1>
            <h2>Day : {targetEvent.day} </h2>
        </article>
    )
}

export default Event

日历组件修正部分

1. 表头渲染修正

<tr>
{monthsData.map((monthEl, index)=> {
  return (
    <th key={index}>{monthEl}</th>
  )
})}
</tr>

2. 弹窗渲染修正

{overviewForm && <Event listEvent={eventList} currentDay={keyDay}/> }

内容的提问来源于stack exchange，提问作者TheRealJohnDoe