如何在 React Redux 中渲染日期对象？答案

【问题标题】：How to render Date Object in React Redux?如何在 React Redux 中渲染日期对象？
【发布时间】：2019-11-08 17:34:43
【问题描述】：

我正在开发一个用于学习目的的预订应用程序。我正在使用 React、Redux 和 React DatePicker。基本上，除了将 Date 对象作为道具传递之外，一切都运行良好。它会抛出一条错误消息：

错误：对象作为 React 子级无效（发现时间：2019 年 11 月 9 日星期六 16:09:32 GMT+0500（叶卡捷琳堡标准时间））。如果您打算渲染一组子项，请改用数组。

我知道 React 不能渲染对象，所以我尝试在 reducer 中使用“toString()”方法，但没有帮助。我想我应该在 DatePicker 中使用这种方法，但我不知道如何。

 <DatePicker
        selected={this.props.date}
        dateFormat="LLL"
        onChange={(day) => {this.props.setDate(day)}}
        locale="ru"
        inline 
/>

请告诉我，我需要在哪里添加 toString() 方法，这样当我在日历中选择一个日期时，Date 对象是一个字符串，我的应用程序可以正常工作。

【问题讨论】：

您的代码看起来不错。你使用这个组件npmjs.com/package/react-datepicker吗？如果是，那么根据他们的示例（这里 - reactdatepicker.com），代码应该可以工作。似乎您尝试在另一个地方渲染一个对象，例如，这不起作用 {this.props.date}。你有一些重现问题的简单例子吗？

标签： javascript reactjs redux react-datepicker

【解决方案1】：

将日期对象转换为字符串的最佳方法取决于您要显示的信息。尝试.toLocaleDateString() 获取一个字符串，该字符串的格式与用户自定义的日期通常写入方式一致。

查看MDN's Date documentation 了解更多选项（您可能希望在“转换获取器”部分列出一个）

关于如何将它集成到 React 中，您无需在 reducer 中进行转换。 Redux 可以很好地存储日期对象，然后您可以在组件内部调用选择的转换方法。

想象一下，例如，一个将 Date 对象作为道具的待办事项组件。在您的情况下，这个对象将来自 redux。

const TodoItem = ({ task, dueDate }) => (
  <div>
    <h2>{task}</h2>
    <span>{dueDate.toLocaleDateString()}</span>
  </div>
);

另一种选择是在 mapStateToProps 函数中调用 .toLocaleDateString()

【讨论】：