在reactjs中显示动态键和值

Question

我想使用reactjs 在表中显示动态键及其值

Actual EC: "2.5"
Actual pH: "6"
location: "Substrate"

以上是API的数据。有实际EC和实际PH。但在表格中，我想像这个一样显示

EC:2.5
ph:6

如何显示？我已经将这些API数据存储在如下状态：

this.setState({
prod_dashboard: data.params
})

这是渲染图：

{this.state.prod_dashboard && this.state.prod_dashboard.map((st, i) => (
<Col lg="3" key={i}>
<Card className="task-box" style={{ backgroundColor: 'black' }}>
<CardBody>
<div className="table-responsive">
<table className="table-nowrap mb-0" style={{ color: "yellow" }}>
<tbody>
<tr>
{st.location !== "" ?
<th scope="row">{st.location} :</th>
:""}
<td style={{ paddingLeft: "20px" }}>{st["Actual EC"]}</td>
</tr>
</tbody>
</table>
</div>
</CardBody>
</Card>
</Col>
))}

Answer 1

基于您想要删除的"实际的"；从关键部分。如果对象格式是固定的并且将类似于；实际EC"；您可以解析您的对象并形成新的对象，该对象将不包含"；实际"；在关键部分，并在渲染中使用新形成的对象。请参阅下面的代码。

var obj = {"Actual EC": "2.5",
"Actual pH": "6",
"location": "Substrate"};
var massageObj = {};
Object.keys(obj).map((key) => {
key.indexOf('Actual') != -1 ? massageObj[key.split(" ")[1]] = obj[key] : 
massageObj[key]=obj[key]
})