Как сделать динамический заголовок React-Table?

Я хочу указать дату для заголовков в столбцах, но получаю сообщение об ошибке, когда пытаюсь вычесть один день. Я был бы признателен, если бы вы могли помочь.

     codes : 

          render(){
          const t = new Date();


          const t1 = new Date();
          t1.setDate(t1.getDate() - 1);


         columns = [{
          {Header:t},
          {Header:t1}
         }]

         return{ 
          <ReactTable
          Columns = {columns}
          />
         }
       }

Я хочу, чтобы t1 упал на 1 день без проблем, в заголовке t отображается сегодняшняя дата, но я не показываю заголовок t1, я хочу дефицит дня и выдает следующую ошибку.

{
Objects are not valid as a React child (found: Tue Apr 09 2019 12:19:07 GMT+0300 (GMT+03:00)). If you meant to render a collection of children, use an array instead.
    in div (created by ReactTable)
    in div (created by ThComponent)
    in ThComponent (created by ReactTable)
    in div (created by TrComponent)
    in TrComponent (created by ReactTable)
    in div (created by Thead)
    in Thead (created by ReactTable)
    in div (created by TableComponent)
    in TableComponent (created by ReactTable)
    in div (created by ReactTable)
    in ReactTable (at drivingHours.jsx:229)
    in div (created by Col)
    in Col (created by Context.Consumer)
    in ForwardRef(Bootstrap(Col)) (at drivingHours.jsx:228)
    in div (created by Row)
    in Row (created by Context.Consumer)
    in ForwardRef(Bootstrap(Row)) (at drivingHours.jsx:227)
    in div (created by Col)
    in Col (created by Context.Consumer)
    in ForwardRef(Bootstrap(Col)) (at drivingHours.jsx:226)
    in DrivingHours (created by Connect(DrivingHours))
    in Connect(DrivingHours) (at driverReports.jsx:42)
    in div (created by TabPane)
    in Transition (created by Fade)
    in Fade (created by TabPane)
    in TabPane (created by Context.Consumer)
    in ForwardRef(Bootstrap(TabPane)) (created by Context.Consumer)
    in ForwardRef(ContextTransform) (created by Tabs)
    in div (created by TabContent)
    in TabContent (created by Context.Consumer)
    in ForwardRef(Bootstrap(TabContent)) (created by Tabs)
    in TabContainer (created by Tabs)
    in Tabs (created by Uncontrolled(Tabs))
    in Uncontrolled(Tabs) (at src/index.js:127)
    in ForwardRef (at driverReports.jsx:27)
    in section (at driverReports.jsx:26)
    in ControlledTabs (created by Connect(ControlledTabs))
    in Connect(ControlledTabs) (created by Route)
    in Route (at app/index.js:48)
    in Switch (at app/index.js:41)
    in main (at app/index.js:40)
    in div (created by Row)
    in Row (created by Context.Consumer)
    in ForwardRef(Bootstrap(Row)) (at app/index.js:28)
    in div (created by Container)
    in Container (created by Context.Consumer)
    in ForwardRef(Bootstrap(Container)) (at app/index.js:27)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by withRouter(Connect(App)))
    in withRouter(Connect(App)) (at src/index.js:14)
    in div (at src/index.js:13)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Connect(ConnectedRouter))
    in Connect(ConnectedRouter) (at src/index.js:12)
    in Provider (at src/index.js:11)}
    ```


Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
2 167
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Проблема в том, что ваше значение Object.

Вы должны преобразовать его в строку.

Например, будет отображаться new Date().getTime() или new Date().toString().

Просто деформируйте свой t1 в строковом шаблоне, как показано ниже.

columns = [{
      {Header:t},
      {Header:`${t1}`}
     }]

     return{ 
      <ReactTable
      Columns = {columns}
      />
     }
   }

Я сделал решение вашего родительского и дочернего вопроса, но вопрос был закрыт, и я больше не могу на него ответить. репост вопроса, чтобы я мог написать ответ

Andam 18.06.2019 09:58

@Andam - Мой первоначальный вопрос был отложен. Можете ли вы опубликовать его где-нибудь еще. Лично я не считаю правильным создание повторяющегося вопроса. Или вставьте решение здесь.

Kracki 18.06.2019 10:12

На самом деле я просмотрел ваши прошлые вопросы. Вы не помечаете правильный ответ как правильный ответ, даже если вы говорите в этих постах, что они правильные и именно такие, какие вы хотите. Какой позор. Извините, нет ответа для вас

Andam 18.06.2019 10:23
Ответ принят как подходящий

Я решил проблему:

коды :

      render(){
      const t = new Date();


      const t1 = new Date();
      t1.setDate(t1.getDate() - 1);


     columns = [{
      {Header:t},
      {Header:t1.toISOString().split('T')[0]} /// format fixed, solved problem.
     }]

     return{ 
      <ReactTable
      Columns = {columns}
      />
     }
   }

Другие вопросы по теме