在React中从.CSV到JSON到表的数据(表头也是动态的)

时间:2018-07-04 05:53:22

标签: javascript reactjs csv

在我的下面的代码中,onDataChange的{​​{1}}属性通过Form element组件中的Papa.parse从.CSV到JSON的数据并在{状态下更新Form {1}}。

在选择.CSV文件data后加载数据时,显示错误,指出CommonComponentKeys: 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])

2 个答案:

答案 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中的密钥。这样做有两个更好的理由:

  1. 您不必担心等待数据到达,组件会在更新时更新。
  2. 如果您更改数据,则标题也会更改。

代码如下:

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>
    );
}