Html 如何在reactjs中创建自定义动态表

我试图用reactjs创建一个带有header的定制动态表，但不知何故，它使用钩子失败了。我是新来的

以下是我尝试过但失败的东西：

import React，{useState}来自“React”；
常数服务费=（）=>{
const[items，setitems]=useState({
研究：[
{“服务”：“Langar/Preeti Bhoj的租用费”，“费用”：“251英镑”，“评论”：“包括厨房的使用。此外，从Mandir供应或购买的所有货物和材料”}，
{“服务”：“Preeti Bhoj（Daal，1 Veg，Dahi，Chawal，Roti，Sweet）”，“费用”：“321英镑”，“评论”：“额外的Sabzi（100英镑）加上清洁剂（50英镑）”，
{“服务”：“普亚/哈万公寓（格拉斯哥境内）”，“收费”：“$31+”，“评论”：“}，
{“服务”：“普亚/哈万公寓（格拉斯哥郊外）”，“收费”：“$51+”，“评论”：“}，
]
})
常量renderTableData=（）=>{
返回此.items.stude.map（（stud，index）=>{
const{Services，Charges，Comments}=stud//解构
返回(
{Services}
{费用}
{评论}
)
})
}
返回(
反应动态表
{this.renderTableData（）}
);
};
出口违约服务费；

在App.js中使用servicesharges.js

render（）{
}

删除

此

关键字，因为您的组件是功能组件

const renderTableData = () => {
        return items.stude.map((stud, index) => { // remove this
            const { Services, Charges, Comments } = stud //destructuring
            return (
                <tr >
                    <td>{Services}</td>
                    <td>{Charges}</td>
                    <td>{Comments}</td>
                </tr>
            )
        })
    }

return (
            <div>
                <h1 id='title'>React Dynamic Table</h1>
                <table id='students'>
                    <thead>
                     <tr>
                       <th>Services</th>
                       <th>Charges</th>
                       <th>Comments</th>
                     </tr>
                    </thead>
                    <tbody>
                        {renderTableData()} // remove this
                    </tbody>
                </table>
            </div>
        );

const renderTableData=（）=>{
返回items.stude.map（（stud，index）=>{//删除此
const{Services，Charges，Comments}=stud//解构
返回(
{Services}
{费用}
{评论}
)
})
}
返回(
反应动态表
服务
收费
评论
{renderTableData（）}//删除此
);

hey@Sarthak Aggarwal如果我删除此{renderTableData（）}，则不会显示任何内容，但如果使用此{renderTableData（）}，则会出现此错误×TypeError:无法获取未定义或空值的属性“items”reference@ParthTiwari，我已经更新了我的代码。让我知道它是否有效，或者您是否有任何错误。谢谢@Sarthak Aggarwal它的有效性，我们在react hooks中不使用它吗？但产量与预期的不一样design@ParthTiwari，React钩子用于功能组件中，该组件本质上是一个函数，

此

指调用站点或调用函数的位置。查看以了解有关此的更多信息。还更新了表设计的代码。hey@Sarthak阿加瓦尔你能调查一下吗