Question

我们正尝试从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>
)
}
}

Answer 1

您将错误的值放入表中，它应该是值的数组，您正在放置对象的数组，请尝试以下操作：

    state.tableData.workOrder1.map((e)=>{
    let workOrder1=Object.values(e)
    return(
            <Rows
              key={index}
              data={workOrder1}
              style={styles.row}
            />
     )
  })

将本机提取的Json数据反应到表

1 个答案: