如何在本机反应中从平面列表中设置 Json 数组

Question

我是 react native 的新手。我从 asyncstorage 获取数据。如何从平面列表中设置该数据。我的问题是无法在平面列表数据中正确设置值。特此附上 JSON 值和我的代码。我尝试了很长时间，但对此一无所知，请帮助我。请

我将数据存储到存储值 Json Data

    {
   "users":[
      {
         "title":"Opna Women's Short Sleeve Moisture",
         "image":"https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg",
         "id":19
      },
      {
         "title":"DANVOUY Womens T Shirt Casual Cotton Short",
         "image":"https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg",
         "id":20
      }
   ]
}

主要代码。

   import React, { useState } from 'react';
import { SafeAreaView, StyleSheet, View, Text, Image, Alert, TouchableOpacity } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/MaterialIcons';
import COLORS from '../../consts/colors';
import foods from '../../consts/foods';
import { PrimaryButton } from '../components/Button';
import AsyncStorage from '@react-native-async-storage/async-storage';

const CartScreen = ({ navigation }) => {
  const [value, setvalue] = useState(true);


  AsyncStorage.getItem('storeddata')
    .then((value) => {
      setvalue(value)
      console.log("saveddata", value);

    }
    )

  const CartCard = ({ item }) => {
    console.log("itemlist", item);
    return (
      <View style={style.cartCard}>
        <Image source={{ uri: item.image }} style={{ height: 80, width: 80 }} />
        <View
          style={{
            height: 100,
            marginLeft: 10,
            paddingVertical: 20,
            flex: 1,
          }}>
          <Text style={{ fontWeight: 'bold', fontSize: 16 }}>{item.title}</Text>
          <Text style={{ fontSize: 13, color: COLORS.grey }}>
            {item.title}
          </Text>
          <Text style={{ fontSize: 17, fontWeight: 'bold' }}>${item.id}</Text>
        </View>
        <View style={{ marginRight: 20, alignItems: 'center' }}>
          <Text style={{ fontWeight: 'bold', fontSize: 18 }}>5</Text>
          <View style={style.actionBtn}>
            <Icon name="remove" size={25} color={COLORS.white} />
            <Icon name="add" size={25} color={COLORS.white} />
          </View>
        </View>
      </View>
    );
  };
  return (
    <SafeAreaView style={{ backgroundColor: COLORS.white, flex: 1 }}>
      <View style={style.header}>
        <Icon name="arrow-back-ios" size={28} onPress={navigation.goBack} />
        <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Cart</Text>
      </View>
      <FlatList
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: 80 }}
        data={value}
        renderItem={({ item }) => <CartCard item={item} />}
        ListFooterComponentStyle={{ paddingHorizontal: 20, marginTop: 20 }}
        ListFooterComponent={() => (
          <View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginVertical: 15,
              }}>
              <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
                Total Price
              </Text>
              <Text style={{ fontSize: 18, fontWeight: 'bold' }}>$50</Text>
            </View>
            <View style={{ marginHorizontal: 30 }}>
              <PrimaryButton title="CHECKOUT" onPress={() => navigation.navigate('Checkout')} />
            </View>
          </View>
        )}
      />
    </SafeAreaView>
  );
};
const style = StyleSheet.create({
  header: {
    paddingVertical: 20,
    flexDirection: 'row',
    alignItems: 'center',
    marginHorizontal: 20,
  },
  cartCard: {
    height: 100,
    elevation: 15,
    borderRadius: 10,
    backgroundColor: COLORS.white,
    marginVertical: 10,
    marginHorizontal: 20,
    paddingHorizontal: 10,
    flexDirection: 'row',
    alignItems: 'center',
  },
  actionBtn: {
    width: 80,
    height: 30,
    backgroundColor: COLORS.primary,
    borderRadius: 30,
    paddingHorizontal: 5,
    flexDirection: 'row',
    justifyContent: 'center',
    alignContent: 'center',
  },
});

export default CartScreen;

Answer 1

Flatlist 数据 props 将数组作为输入 Official doc

您从本地存储中获取一个对象，您必须将一个数组传递给它

本地存储保存字符串值，所以当你在其中存储数据时你必须做JSON.stringify()它，当你从本地存储中获取数据时你必须做JSON.parse()它 local storage link

Answer 2

如果您的value 存储了JSON 以上的数据，则尝试像这样传递道具：

<FlatList
    ...
    data={value.users}
    ...
/>

希望这对你有用。