Реагировать на собственное извлечение данных Json в таблицу

мы пытаемся извлечь данные из файла 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>
)
}
}