在我的下面的代码中,onDataChange
的{{1}}属性通过Form element
组件中的Papa.parse
从.CSV到JSON的数据并在{状态下更新Form
{1}}。
在选择.CSV文件data
后加载数据时,显示错误,指出CommonComponent
是Keys: Object.keys(this.props.data[0])
。但是,this.props.data[0]
可以很好地工作,并且等待null
进行更新和呈现,即使它们两者都位于{this.props.data.map(data=> <TableRows key={data.id} {...data}/>)}
的开头。
有什么办法可以处理这种情况?我想使用data
(即Array的第一个对象的键)来显示表头,因为不同的.CSV表头会有所不同,并且我想呈现任何大小的表或缩放.CSV。
这是我的代码,我没有显示null
组件,因为它无关紧要。
Object.keys(this.props.data[0])
答案 0 :(得分:1)
我有了解决方案,现在我可以显示通过道具传到TableComponent
的所有JSON数据。这是针对我的问题的解决方案,我在考虑了chbchb55的答复后提出了:
class TableRows extends Component {
render() {
return (
<tr>
{this.props.keys.map(Key=> <td>{this.props.data[Key]}</td>)}
</tr>
);
}
}
class Table extends Component {
render() {
return (
<table>
<thead>
<tr>
{this.props.keys.map(Key => <th>{Key}</th>)}
</tr>
</thead>
<tbody>
{this.props.data.map(data=> <TableRows key={data.id} keys={this.props.keys} data={data}/>)}
</tbody>
</table>
);
}
}
class TableComponent extends Component {
render() {
return (
<div>
<Table keys={this.props.data.length > 0 ? Object.keys(this.props.data[0]) : []} data={this.props.data}/>
</div>
);
}
}
答案 1 :(得分:0)
componentDidMount
您的问题是您正在使用componentDidMount
从数据对象获取keys
。安装组件后,很可能还没有数据。
解决方案:获取render
中的密钥。这样做有两个更好的理由:
代码如下:
render() {
return (
<div>
<table border="1">
<thead>
<tr>
{ this.props.data.length > 0 ? Object.keys(this.props.data[0]).map(KEY => <th>{KEY}</th>) : ''}
</tr>
</thead>
<tbody>
{this.props.data.map(data=> <TableRows key={data.id} {...data}/>)}
</tbody>
</table>
</div>
);
}