React中如何将Datepicker返回的日期对象转为字符串作为参数传递

云原生阿岚

2026-10-4

问题原因

你在构造对象字面量时错误使用了属性简写语法：

当你写 { text, selectedDate, reminder } 时，属于JS对象属性简写，等价于 { text: text, selectedDate: selectedDate, reminder: reminder }，该语法仅支持直接传入变量名，自动将变量名作为属性键、变量值作为属性值。
你直接写 selectedDate.toLocaleDateString() 时，没有指定对应的属性键，JS无法识别该表达式对应的对象属性，因此会抛出语法错误。

解决方案

有两种常用解决方式，可按需选择：

方案1：传参时显式指定属性键（无需修改其他现有逻辑）

直接给日期属性显式声明键名，保持键名和原有逻辑一致即可：

onAdd({ 
  text, 
  selectedDate: selectedDate.toLocaleDateString(), 
  reminder 
})

注意你开启了DatePicker的isClearable属性，用户清空日期时selectedDate会是null，直接调用方法会报错，可以加个空值判断：

onAdd({ 
  text, 
  selectedDate: selectedDate ? selectedDate.toLocaleDateString() : '', 
  reminder 
})

方案2：存储状态时直接存字符串（无需修改传参逻辑）

修改DatePicker的onChange回调，选中日期时就转成字符串存入state，原有传参代码不需要改动：

<Datepicker 
    selected={selectedDate ? new Date(selectedDate) : null} 
    onChange={(date) => setSelectedDate(date ? date.toLocaleDateString() : '')}
    placeholder='Select Date' 
    minDate={new Date()}
    isClearable 
    showYearDropdown
    scrollableYearDropdown  
/>

这里需要注意，DatePicker的selected参数需要接收日期对象，所以绑定的时候要把字符串转回Date类型。