表格正文中没有任何打印到屏幕上的内容

Question

import React from 'react';
export default class HelloWorld extends React.Component {
public render(): JSX.Element {
let elements = [{"id":1,"isActive":true,"object":"Communication","preview":"Un appercu de la communication","sentAt":{"date":"2020-12-17 15:18:46.000000","timezone_type":3,"timezone":"Europe/Paris"},"url":"//30osd.r.a.d.sendibm1.com/mk/mr/kwK4UoPBwpKUgtMy3RrTs3Fn0Zn0hb4lTgoZcAqRkeWesC3OtK_zelPOf4zHvGR7XP1gto1uuSmJUtNuOUTFtcLqgnHofc_mOiocZLAtwg5XdfRW"}];
return (
<table>
<thead>
<tr>
<th>Elements</th>
<th>Contenu</th>
</tr>
</thead>
<tbody>
{elements.map(element => {
<tr>
<td>
<p>{element.id}</p>
</td>
<td>
<p>{element.url}</p>
</td>
</tr>
})}
</tbody>
</table>
);
}
}

为什么表格正文内没有打印任何内容？我不知道为什么我已经结束了两个小时我想要每个元素一个tr，每个tr中有一个td用于element.id，一个用于element.url

Answer 1

在tbody内部应该是：

<tbody>
{elements.map(element => {
return <tr>
<td>
<p>{element.id}</p>
</td>
<td>
<p>{element.url}</p>
</td>
</tr>
})}
</tbody>

Answer 2

尝试将元素包装在括号中。

Sakshi的答案的替代方案是：

{
elements.map((element) => (
<tr>
<td>
<p>{element.id}</p>
</td>
<td>
<p>{element.url}</p>
</td>
</tr>
));
}

Answer 3

确保在数组的.map()中返回JSX元素。您可以使用隐式或显式返回：

<tbody>
{elements.map((element) => (
<tr>
<td>
<p>{element.id}</p>
</td>
<td>
<p>{element.url}</p>
</td>
</tr>
))}
</tbody>

或者：

<tbody>
{elements.map((element) => {
return (
<tr>
<td>
<p>{element.id}</p>
</td>
<td>
<p>{element.url}</p>
</td>
</tr>
);
})}
</tbody>

Answer 4

首先从render方法中删除JSX.元素，因为这是不需要的。如果您使用npm-create创建了应用程序，主要是您需要在map函数中返回表行(目前只有一行(。

import React from 'react';
export default class HelloWorld extends React.Component {
render(){
let elements = [{"id":1,"isActive":true,"object":"Communication","preview":"Un appercu de la communication","sentAt":{"date":"2020-12-17 15:18:46.000000","timezone_type":3,"timezone":"Europe/Paris"},"url":"//30osd.r.a.d.sendibm1.com/mk/mr/kwK4UoPBwpKUgtMy3RrTs3Fn0Zn0hb4lTgoZcAqRkeWesC3OtK_zelPOf4zHvGR7XP1gto1uuSmJUtNuOUTFtcLqgnHofc_mOiocZLAtwg5XdfRW"}];
return (
<table>
<thead>
<tr>
<th>Elements</th>
<th>Contenu</th>
</tr>
</thead>
<tbody>
{elements.map(element => {
return(
<tr>
<td>
<p>{element.id}</p>
</td>
<td>
<p>{element.url}</p>
</td>
</tr>
)
})}
</tbody>
</table>
);
}
}