Javascript 单击表格单元格时无法获取表格标题文本

我有下面的代码运行得很好，除了我点击单元格，无法得到表头文本。根据代码，我可以很容易地抓取行文本。如果我在alert函数中使用Object.keys（数据）来获取数据，这将提供所有标题文本，而不是相应的单元格。我正在使用语义用户界面反应表。

class NonProtectedFeatureBias extends Component {
    constructor(props){
        super(props);
        this.state = {       
            staticPostData:{
                dataset_id: 1
            },
            tableData:{},
        };
    }
    renderKeys (data) {
        return Object.keys(data).map(item => (<Table.HeaderCell>{item}</Table.HeaderCell>))
    }
    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>
            <Table.Cell>{item}</Table.Cell>
              { 
                values.map(val => 
                    <Table.Cell 
                        className={ val === 'Low' ? ('green-color') : val === 'High' ? ('red-color') : ('orange-color') } 
                        selectable
                        onClick={()=>{
                            alert(Object.keys(data) + " " + item);
                        }}
                        verticalAlign='middle'
                        > {val}
                    </Table.Cell> ) 
              }
          </Table.Row>
        ))
    }

    componentDidMount() {
        this.fetchData();
    }
    fetchData(){
        axios.post('http://localhost:5000/GetProxyTable', this.state.staticPostData)
         .then((response) =>{
            this.setState({tableData:response.data})

        });
    }
    render(){
        return ( 
            <Container style={{height:"250px", backgroundColor:""}}>
                <Table definition style={{marginTop:"5px"}} key="mytb">
                    <Table.Header>
                        <Table.Row className="cell-with-no-padding">
                            <Table.HeaderCell className="cell-width-single" />
                            {this.renderKeys(this.state.tableData)}
                        </Table.Row>
                    </Table.Header>

                    <Table.Body>
                        {this.renderValues(this.state.tableData)}
                    </Table.Body>
                </Table>
            </Container>
        );
    }
}
export default NonProtectedFeatureBias;

类非保护特性偏差扩展组件{
建造师（道具）{
超级（道具）；
this.state={
staticPostData：{
数据集_id:1
},
tableData:{}，
};
}
renderKeys（数据）{
返回Object.keys（data.map）（item=>（{item}））
}
渲染值（数据）{
常量行={}
Object.values（数据）.forEach（列=>{
for（让Object.entries（col））的[key，value]{
行[键]=行[键]？[…行[键]，值]：[值]
}
})
返回Object.entries（rows.map）（[item，values]）=>(
{item}
{ 
values.map（val=>
{
警报（对象.键（数据）+''+项）；
}}
垂直排列
>{val}
) 
}
))
}
componentDidMount（）{
这是fetchData（）；
}
fetchData（）{
轴心柱http://localhost:5000/GetProxyTable，this.state.staticPostData）
。然后（（响应）=>{
this.setState（{tableData:response.data}）
});
}
render（）{
报税表（
{this.renderKeys（this.state.tableData）}
{this.renderValue（this.state.tableData）}
);
}
}
导出默认的非保护特性偏差；

下面是我从API得到的响应。

任何建议都将不胜感激。

对象。键（数据）

将为您提供所有密码。只需使用索引即可获得特定的列名

像这样

Object.keys（数据）[索引]

代码片段

。。。
{item}
{ 
values.map（（val，index）=>//最简单的解决方案！非常有效：D谢谢