我正在尝试将API的响应显示到react-semantic-ui表中。在使用获取数据设置状态之后,我需要将一阶键作为列名,然后将二阶键作为行名,并且表主体中将显示二阶键的值。我已经做完了,这导致在设置所有具有相同数据的单元格值时,每行中单元格的数量增加了一倍。
class NonProtectedFeatureBias extends Component {
constructor(props){
super(props);
this.state = {
staticPostData:{
dataset_id: 1
},
tableData:{},
tableColumnNames:[],
};
}
renderKeys (data) {
let tcolumn = [];
for(let i=0; i<Object.keys(data).length;i++){
const Obj1 = Object.keys(data)[i];
//console.log(Obj1)
tcolumn.push(Obj1);
}
let col = tcolumn.map(item=>{
return <Table.HeaderCell>{item}</Table.HeaderCell>
})
return col
}
renderValues (data) {
let row=null;
for(let i=0; i<Object.keys(data).length;i++){
const Obj1 = Object.values(data)[i];
let trows = [];
const Obj2 = Object.keys(Obj1).map(item =>{
trows.push(item);
});
let tvalues =[];
const Obj3 = Object.values(Obj1).map(item =>{
tvalues.push(item);
console.log(item)
});
row = trows.map(item=>{
return(
<Table.Row className="cell-current">
<Table.Cell className="cell-width-single">{item}</Table.Cell>
{tvalues.map(val =>{
return <Table.Cell selectable>{val}</Table.Cell>
//console.log(val)
})}
</Table.Row>
)
})
}
return row
}
componentDidMount() {
this.fetchData();
}
fetchData(){
axios.post('http://localhost:5000/GetProxyTable', this.state.staticPostData)
.then((response) =>{
var count = Object.keys(response.data).length;
this.setState({tableData:response.data})
console.log(response.data)
});
}
render(){
return (
<Container style={{height:"250px", backgroundColor:""}}>
<Table definition >
<Table.Header>
<Table.Row className="cell-with-no-padding">
<Table.HeaderCell />
{this.renderKeys(this.state.tableData)}
</Table.Row>
</Table.Header>
<Table.Body>
{this.renderValues(this.state.tableData)}
</Table.Body>
</Table>
</Container>
);
}
}
export default NonProtectedFeatureBias;
这是我从API得到的响应
这是实现我的目标的正确方法吗?我希望有一种优化的方法可以做到这一点。而且我还需要能够单击一个单元格并获取有关行和列的名称。任何建议或意见将不胜感激。
您的renderValues
正在通过列而不是行进行映射。另外,您将每个假行设置为相同的值,因此所有“行”都相等。最后,返回最后一个,表示最后一列的值。
您可以尝试下面的代码,该代码在呈现行之前先将列映射到行对象:
renderValues (data) {
const rows = {}
Object.values(data).forEach(col => {
for (let [key, value] of Object.entries(col)) {
rows[key] = rows[key] ? [...rows[key], value] : [value]
}
})
return Object.entries(rows).map(([item, values]) => (
<Table.Row className="cell-current">
<Table.Cell className="cell-width-single">{item}</Table.Cell>
{ values.map(val => <Table.Cell selectable>{val}</Table.Cell> ) }
</Table.Row>
))
}