Question

我想给列中的标题加上日期，但是当我尝试减去一天时遇到错误。如果您能提供帮助，我将不胜感激。

     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)}
    ```

Answer 1

问题在于您的值是Object。

您应该将其转换为字符串。

例如，将显示new Date().getTime()或new Date().toString()。

Answer 2

只需在字符串模板中扭曲t1，如下所示

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

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

Answer 3

我解决了这个问题：

代码：

      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}
      />
     }
   }

如何做React-Table动态标题？

3 个答案: