Question

我是React-Native的新手，因此，Javascript和我试图了解如何检索要在FlatList中填充的数据。我收到的JSON格式如下所示

[
  {
    "18": {
      "sellingUnitName": "unité(s)",
      "qualifier": "GOOD",
      "sizeQualifierName": "gr.20"
    },
    "19": {
      "sellingUnitName": "unité(s)",
      "qualifier": "BAD",
      "sizeQualifierName": "gr.18-20"
    }
  }
]

这是我的FlatList的样子

<FlatList
    data={ this.state.dataSource }
    ItemSeparatorComponent = {this.FlatListItemSeparator}
    renderItem={({item}) => <Text>{item.sellingUnitName}</Text>}
    keyExtractor={(item, index) => index.toString()}
/>

如果格式是这样的，我的FlatList运行良好

[
  {
    "sellingUnitName": "unité(s)",
    "qualifier": "GOOD",
    "sizeQualifierName": "gr.20"
  },
  {
    "sellingUnitName": "unité(s)",
    "qualifier": "BAD",
    "sizeQualifierName": "gr.18-20"
  }
]

我的问题是：如何通过循环遍历每个项目并忽略第一个id（例如＆＃34; 18＆＃34;在第一个示例中）来设置使用第一种格式，以便我可以使用item.keyName在我的FlatList中显示每个值？看起来我需要获得嵌套元素，但我无法弄清楚如何做到这一点。

如果需要，这就是我获取数据的方式

fetch('https://www.mywebsite.com/test.php')
  .then((response) => response.json())
  .then((responseJson) => {
      this.setState({
        dataSource: responseJson
      };
     })
   .catch((error) => {
       console.error(error);
   });

谢谢！

Answer 1

使用Object.keys和Array.map，我们可以让数据看起来像您想要的那样。

＆＃13;

let data = [
  {
    "18": {
      "sellingUnitName": "unité(s)",
      "qualifier": "GOOD",
      "sizeQualifierName": "gr.20"
    },
    "19": {
      "sellingUnitName": "unité(s)",
      "qualifier": "BAD",
      "sizeQualifierName": "gr.18-20"
    }
  }
];

let dataObj = data[0];

let dataArray = Object.keys(dataObj).map(key => {
  let obj = dataObj[key];
  obj.keyName = key;
  return obj;
})

console.log(dataArray)

＆＃13;

在此之后，dataArray将看起来像[{keyName: 18, sizeQualifierName: "gr.20", ...}, {keyName: 19, sizeQualifierName:"gr.18-20", ...}]

如何在React-Native

1 个答案: