我们正在尝试从JSON文件中提取数据并将其放在表中,以便将数据显示得很好。但是,从JSON到一个数组的映射,我们遇到了一些问题。当我们之前尝试过时,我们最终使用了"未定义对象"或一个空表。帮助感谢!
这是JSON文件的摘录。
{
"workOrder1": [
{ "articleNumber": "1", "productName": "Mjölk", "pickUp": "L1H1",
"dropOff": "M1", "amount": "6", "status": "Klar" },
{ "articleNumber": "2", "productName": "Ägg", "pickUp": "L2H1", "dropOff": "M2", "amount": "3", "status": "Pågående" },
{ "articleNumber": "3", "productName": "Mjöl", "pickUp": "L3H4", "dropOff": "M3", "amount": "1", "status": "Ej påbörjad" }
],
}
和该表的本机代码
constructor(props){
super(props);
this.state = {
tableHead: [ 'Art', 'Prod', 'Hämtas', 'Lämnas', 'Mängd', 'Status'],
tableData: [
['1', '2', '3', '4', '5', '6'],
['1', '2', '3', '4', '5', '6']
]
}
}
componentDidMount(){
this.fetchWorkOrder();
}
fetchWorkOrder(){
fetch("www.example.com/request", {
method: 'GET'
})
.then((response) => response.json())
.then((response) => {
this.setState({
tableData: response
});
});
}
render() {
const state = this.state;
return (
<View style={styles.container}>
<Text style={styles.header}>Alla arbetsordrar</Text>
<Table borderStyle={{ borderWidth: 2, borderColor: 'black'}}>
<Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
{
Object.values(state.tableData).map((workOrder1, index) => {
<Row
key={index}
data={workOrder1}
style={styles.row}
/>
})
}
</Table>
</View>
)
}
}
您将错误的值放入表中应该是您放置的对象数组的数组,请尝试以下操作:
state.tableData.workOrder1.map((e)=>{
let workOrder1=Object.values(e)
return(
<Rows
key={index}
data={workOrder1}
style={styles.row}
/>
)
})