如何正确存储React Multi Date Picker选中的多日期数组？

我正在创建一个表单，需要用户选择多个非连续日期。我尝试实现multi-date-picker组件，但所有尝试都返回undefined。我是新手，推测遗漏了基础内容，恳请指导该组件的正确配置方式。

我的代码 #

const {
  date
} = useAppContext()

const[values,setValue] =  React.useState([]);

const handleDates = (value) =>{
  const name = 'date'
  setValue({...values, value})
  handleChange({ name, values })
}

<DatePicker 
      multiple
      value={values}
      name="date" 
      onChange={handleDates}
      minDate="2023/02/16"
      maxDate="2023/02/26"   
/>

你的代码存在三个核心问题导致返回undefined，逐一修正即可：

• 状态类型不匹配：
  你初始将values设为数组，但更新状态时用了对象展开语法{...values, value}，会把数组转换成对象，而组件预期接收的是日期数组，类型不匹配就会返回undefined。修正方式是直接用组件返回的日期数组更新状态：

  const [selectedDates, setSelectedDates] = React.useState([]);
  

• 异步状态更新的旧值问题：
  setValue是异步操作，你在handleChange里传递的values是更新前的旧状态，无法正确传递最新选中的日期。应该直接使用onChange回调返回的最新日期数组：

  const handleDates = (newDates) => {
    setSelectedDates(newDates);
    // 传递最新的选中日期数组给handleChange
    handleChange({ name: 'date', value: newDates });
  }
  

• 日期格式错误：
  minDate和maxDate需要传入Date对象，字符串格式的日期可能无法被组件正确解析，导致组件异常。修正为：

  minDate={new Date('2023/02/16')}
  maxDate={new Date('2023/02/26')}
  

修正后的完整代码 #

const { date } = useAppContext()

const [selectedDates, setSelectedDates] = React.useState([]);

const handleDates = (newDates) => {
  setSelectedDates(newDates);
  handleChange({ name: 'date', value: newDates });
}

<DatePicker 
  multiple
  value={selectedDates}
  name="date" 
  onChange={handleDates}
  minDate={new Date('2023/02/16')}
  maxDate={new Date('2023/02/26')}   
/>

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