React Native FlatList中的JSON

Question

我想在react native中解析Woocomerce API响应，任何人都可以告诉我如何在下面提到的来自JSON响应的React Native Flatlist中解析id，name，categories数组和images数组。

{
      "id": 794,
      "name": "Premium Quality",
      "catalog_visibility": "visible",
      "price": "21.99",
      "regular_price": "21.99",
      "sale_price": "",
      "categories": [
        {
          "id": 9,
          "name": "Clothing",
          "slug": "clothing"
        },
        {
          "id": 14,
          "name": "T-shirts",
          "slug": "t-shirts"
        }
      ],
      "tags": [],
      "images": [
        {
          "id": 792,
          "date_created": "2017-03-23T14:01:13",
          "date_created_gmt": "2017-03-23T20:01:13",
          "date_modified": "2017-03-23T14:01:13",
          "date_modified_gmt": "2017-03-23T20:01:13",
          "src": "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
          "name": "",
          "alt": ""
        },
        {
          "id": 793,
          "date_created": "2017-03-23T14:01:14",
          "date_created_gmt": "2017-03-23T20:01:14",
          "date_modified": "2017-03-23T14:01:14",
          "date_modified_gmt": "2017-03-23T20:01:14",
          "src": "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
          "name": "",
          "alt": ""
        }
      ],
      }

Answer 1

您可以将JSON存储在变量中（例如myJSON），并在JSON.parse属性中执行FlatList。

这是最简单的方法。完成此操作后，可以使用useEffect和useState提高性能，以避免不必要的重新渲染。

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';

const myJson = [
  {
    "id": 794,
    "name": "Premium Quality",
    "catalog_visibility": "visible",
    "price": "21.99",
    "regular_price": "21.99",
    "sale_price": "",
    "categories": [
      {
        "id": 9,
        "name": "Clothing",
        "slug": "clothing"
      },
      {
        "id": 14,
        "name": "T-shirts",
        "slug": "t-shirts"
      }
    ],
    "tags": [],
    "images": [
      {
        "id": 792,
        "date_created": "2017-03-23T14:01:13",
        "date_created_gmt": "2017-03-23T20:01:13",
        "date_modified": "2017-03-23T14:01:13",
        "date_modified_gmt": "2017-03-23T20:01:13",
        "src": "https://example.com/wp-content/uploads/2017/03/T_2_front-4.jpg",
        "name": "",
        "alt": ""
      },
      {
        "id": 793,
        "date_created": "2017-03-23T14:01:14",
        "date_created_gmt": "2017-03-23T20:01:14",
        "date_modified": "2017-03-23T14:01:14",
        "date_modified_gmt": "2017-03-23T20:01:14",
        "src": "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
        "name": "",
        "alt": ""
      }
    ],
  }
];

function Item({ name, price }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{name} - {price}</Text>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={JSON.parse(myJson)}
        renderItem={({ item }) => <Item data={item} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});