的内容不可见

Question

我正在使用react创建一个表。正在显示 th 组件，但 td 不可见。另外，警告“数组或迭代器中的每个子代都应具有唯一的“键”道具。”正在显示。有人可以帮我吗？

import React from 'react';
//import pichr from '../imgs/pichr.jpg';
class Dashboard extends React.Component
{
    constructor()
    {
        super();
        this.state={
            heading:[{Width : '50px', Title : 'WorkFlow' }, {Width : '15px', Title : 'Img' }, {Width : '120px', Title : 'DropdownHere'}],
            content:[{WorkFlow : 'Test123', DropdownHere : ['Tota', 'Maina']}, {WorkFlow : 'Test456', DropdownHere : ['Battakh', 'Kauwwa']}]
        }
    }
    
    render()
    {
        return(
            <div>
                <table>
                <tbody>
                    <tr>
                        { this.state.heading.map((obj) => <th style={{width : obj.Width}}>{obj.Title}</th> )}
                    </tr>
                        { this.state.content.map( (obj,i) => {
                                            <tr>
                                                <td>{ obj.WorkFlow }</td>
                                                <td></td>
                                                <td></td>
                                            </tr>

                        })}
                </tbody>
                </table>
            </div>
        )
    }
}
            
export default Dashboard;

Answer 1

您实际上并没有返回表格行。在tr标记之前添加一个return，一切就好。

编辑：或者使其更像上面的map函数，请删除方括号以使其直接返回而无需关键字。