Как визуализировать объект Date в React Redux? - PullRequest
Новая
       8

Как визуализировать объект Date в React Redux?

1 голос
/ 08 ноября 2019

Я работаю над приложением бронирования в учебных целях. Я использую React, Redux и React DatePicker. В принципе, все работает хорошо, за исключением передачи объекта Date в качестве реквизита. Выдает сообщение об ошибке:

Ошибка: объекты недопустимы как дочерние элементы React (найдено: сб. 09 ноября 2019 16:09:32 GMT + 0500 (стандартное время Екатеринбурга)). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Я знаю, что React не может отображать объекты, поэтому я попытался использовать метод toString () в редукторе, но это не помогло. Я думаю, мне следует использовать этот метод в DatePicker, но я не знаю, как. 

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

Скажите, пожалуйста, где мне нужно добавить метод toString (), чтобы при выборе даты вкалендарь, объект Date является строкой, и мое приложение работает нормально.

1 Ответ

1 голос
/ 08 ноября 2019

Лучший способ превратить ваш объект даты в строку будет зависеть от того, какую информацию вы хотите отобразить. Попробуйте .toLocaleDateString(), чтобы получить строку, отформатированную в соответствии с тем, как даты обычно записываются в пользовательской настройке.

Ознакомьтесь с Документацией MDN Date , чтобы узнать больше вариантов (вы, вероятно, захотитеодин из перечисленных в разделе «получатель конверсии»)

Для того, чтобы интегрировать это в React, вам не нужно выполнять преобразование в своем редукторе. Redux может отлично хранить объекты даты, а затем вы можете вызывать метод преобразования внутри вашего компонента.

Представьте, например, компонент элемента todo, который принимает объект Date в качестве опоры. Этот объект, в вашем случае, будет происходить из избыточного числа. 

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

Другой вариант будет вызывать .toLocaleDateString() внутри вашей mapStateToProps функции

...