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 存储在 var 中（例如 myJSON），并在 FlatList 属性中执行 JSON.parse。

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

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

// JSON.stringify only used here to simulate a true JSON
const myJson = JSON.stringify([
  {
    "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({ item }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{item.name} - {item.price}</Text>

      <View style={{ flex: 1 }}>
        <Text>Categories: </Text>

        {item.categories.map((category) => {
          return (
            <Text>{category.name}</Text>
          )
        })}
      </View>

      <View style={{ flex: 1 }}>
        <Text>Images: </Text>

        {item.images.map((image) => {
          return (
            <Text>Image src: {image.src}</Text>
          )
        })}
      </View>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={JSON.parse(myJson)}
        renderItem={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,
  },
});