[英]React Objects are not valid as a React child
Hi I want to dynamically build a table UI.嗨,我想动态构建一个表格 UI。
I have headers
array like this我有这样的
headers
数组
headers = [ { text: "id", value: "id", }, { text: "Name", value: "name", }, { text: "Description", value: "description", }, { text: "Created", value: "createdAt", },
and items
array like this和这样的
items
数组
items = [ { id: 1, name: "Pathum", description: "Never give up", createdAt: new Date(), }, ],
In my app在我的应用程序中
export default function App() { return ( <div> <table> <tr> { headers.map(header=>(<th>{header.text}</th>)) } </tr> { items.map(row=>( <tr> { headers.map(({value})=>( row[value] )) } </tr> )) } </table> </div> ); }
Rendering table headers is okay.渲染表头没问题。 The problem is rendering table data.
问题是呈现表数据。 It gives me an error.
它给了我一个错误。
Objects are not valid as a React child
对象作为 React 子对象无效
This is live code example https://stackblitz.com/edit/react-rj3unu?file=src/App.js这是实时代码示例https://stackblitz.com/edit/react-rj3unu?file=src/App.js
Why could this happen?为什么会发生这种情况? Any help!
任何帮助!
It's because of new Date()
.这是因为
new Date()
。
You can convert it to a string using new Date().toString()
您可以使用
new Date().toString()
将其转换为字符串
Objects are not valid as a React child
对象作为 React 子对象无效
As new Date()
returns a Date
object.因为
new Date()
返回一个Date
对象。
您还缺少表格数据标签:-)
<td>{row[value]}</td>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.