如何在 React Native 中从 flatlist 设置 Json 数组

Question

I am new in react native . i am get data from asynstorage. how to set that data from flatlist. my problem is can not set value properly in flatlist data. herewith below attached the JSon value and my code. am try to long time but no idea for that please help me. please

I get data to asystorage value 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
      }
   ]
}

Main code.

   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

If your value have that above JSON data stored then try to pass prop like:

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

Hope this works for you.

Answer 2

Flatlist data props take an array as an input Official doc

you are getting an object from local storage you have to pass an array to it

local storage save string value so you have to do JSON.stringify() it when you store data in it and JSON.parse() it when getting data from local storage local storage link