[英]How to display array data into tables in Reactjs
I am trying to display csv file data to frontend in reactjs.我正在尝试在 reactjs 中向前端显示 csv 文件数据。 i read csv file using papaparse and i am getting all data
我使用 papaparse 读取了 csv 文件,并且正在获取所有数据
["0.122584", "0.785882", "0.954039", "0.353008"]
...
...
["0.122584", "0.785882", "0.886715", "-0.626392"]
and want to to display this array data in the form of table.并希望以表格的形式显示此数组数据。
I tried this我试过这个
class Panel extends React.Component {
constructor(){
super();
this.state={
csvfile:undefined,
data:null
};
}
handleChange = event =>{
this.setState({
csvfile:event.target.files[0]
});
};
importCSV = () =>{
const { csvfile } = this.state;
Papa.parse(csvfile, {
complete: this.updateData,
header: false
});
};
updateData(result){
var data = result.data;
console.log(">>>>>")
this.setState({
data:data
})
console.log(data)
}
render(){
return(
<Table bordered>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>{this.state.data}</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</Table>
)
}
But it is not working well.但效果不佳。 it is displaying all data in single cell only.
它仅在单个单元格中显示所有数据。 i want each value in different cell.
我想要不同单元格中的每个值。 I am a beginner in reactJs.
我是 reactJs 的初学者。
Thanks.谢谢。
Hope this can help you!希望这可以帮到你! I write two possibilities(tables) there because your question seems unclear to me.
我在那里写了两种可能性(表格),因为你的问题对我来说似乎不清楚。
Update Code
更新代码
class Table extends React.Component{ data = [ ["0.122584", "0.785882", "0.954039", "0.353008"], ["1", "2", "0.954039", "0.353008"], ]; render(){ return( <table> <tbody> { this.data.map((numList,i) =>( <tr key={i}> { numList.map((num,j)=> <td key={j}>{num}</td> ) } </tr> )) } </tbody> </table> ); } } ReactDOM.render(<Table/>,document.getElementById("root"));
td{ border:1px solid #ccc; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
You can map though you data and add a <tr>
for each this.state.data
.您可以映射数据并为每个
this.state.data
添加一个<tr>
。
//...your previous code
let tableRows = null;
if (this.state.data) {
tableRows = <tr>
{this.state.data.map((data, index) => {
return (
<td key={index}>
{data}
</td>
);
})}
</tr>
}
return(
<Table bordered>
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
{tableRows}
</tbody>
</Table>
) )
can you provide a snapshot of the data that should be displayed in a single row of your table?您能否提供应显示在表格单行中的数据的快照? The Table component that you have posted has headers for First Name, Last Name, and Username.
您发布的 Table 组件具有 First Name、Last Name 和 Username 的标题。 If the data is properly structured, then you can render it on the screen by modifying your component as follows:
如果数据结构正确,那么您可以通过如下修改您的组件将其呈现在屏幕上:
class Panel extends React.Component {
constructor(){
super();
this.state={
csvfile:undefined,
data:null
};
}
handleChange = event =>{
this.setState({
csvfile:event.target.files[0]
});
};
importCSV = () =>{
const { csvfile } = this.state;
Papa.parse(csvfile, {
complete: this.updateData,
header: false
});
};
updateData(result){
var data = result.data;
console.log(">>>>>")
this.setState({
data:data
})
console.log(data)
}
render(){
return(
<Table bordered>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
{this.state.data.map((rowData, index) => (
<tr>
<th scope="row">{index + 1}</th>
<td>{rowData.firstName}</td>
<td>{rowData.lastName}</td>
<td>{rowData.userName}</td>
</tr>
))}
</tbody>
</Table>
)
}
Here, I have made the assumption that your data for each row is an object with the properties firstName
, lastName
, and userName
.在这里,我假设每一行的数据是一个具有
firstName
、 lastName
和userName
属性的对象。 Let me know if anything is unclear to you.如果您有任何不清楚的地方,请告诉我。
You need to create a <td>
element for each value in the this.state.data
array, here is how you can do that:您需要为
this.state.data
数组中的每个值创建一个<td>
元素,您可以这样做:
<tr>
...
{ !!this.state.data && this.state.data.map(value => (<td>{value}</td>)) }
...
</tr>
you can use antd :framework for reactjs你可以使用 antd :framework for reactjs
so you build columns in an easy way like this所以你可以像这样简单地构建列
const columns = [{
title: 'First Name',
dataIndex: 'first_name',
sortDirections: ['descend', 'ascend'],
key: 'first_name',
width: '20%',}]
and you can just :你可以:
return (
<Table className="yourClassCss" columns={columns} dataSource={this.state.data} />
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.