如何在 React Redux 中呈現日期 Object？

Question

我正在開發一個用於學習目的的預訂應用程序。 我正在使用 React、Redux 和 React DatePicker。 基本上，一切正常，除了將 Date object 作為道具傳遞。 它拋出一條錯誤消息：

錯誤：對象作為 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() 方法，以便當我 select 日歷中的日期時，日期 object 是一個字符串，我的應用程序工作正常。

Answer 1

將日期 object 轉換為字符串的最佳方法取決於您要顯示的信息。 嘗試.toLocaleDateString()以獲取格式化為通常以用戶自定義方式編寫日期的字符串。

查看MDN 的Date文檔以獲取更多選項（您可能希望在“conversion getter”部分列出一個）

對於如何將其集成到 React 中，您無需在 reducer 中進行轉換。 Redux 可以很好地存儲日期對象，然后您可以在組件內部調用選擇的轉換方法。

例如，想象一下一個 todo 項目組件，它接受一個 Date object 作為道具。 在您的情況下，此 object 將來自 redux。

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

另一種選擇是在mapStateToProps function 中調用.toLocaleDateString()