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

Question

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

Error: Objects are not valid as a React child (found: Sat Nov 09 2019 16:09:32 GMT+0500 (Yekaterinburg Standard Time)). If you meant to render a collection of children, use an array instead.

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

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

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

Answer 1

将日期对象转换为字符串的最佳方式取决于您要显示的信息。尝试 .toLocaleDateString() 获取一个字符串，该字符串的格式与用户习惯中日期的常用书写方式相同。

查看 MDN's Date documentation 了解更多选项（您可能希望在 'conversion getter' 部分下列出一个选项）

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

例如，假设一个待办事项组件接受一个 Date 对象作为 prop。在您的情况下，该对象将来自 redux。

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

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

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

How to render Date Object in React Redux?

javascript

reactjs

redux

react-datepicker