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

Posted 2023-05-07

【中文标题】如何在本机反应中从平面列表中设置 Json 数组

【英文标题】：How to set Json array from flatlist in react native

【发布时间】：2021-11-27 08:28:59

【问题描述】：

我是 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;

【参考方案1】：

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

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

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

【讨论】：

我正在成功获取数据。但不工作平面列表

你得到的数据是一个对象，你必须使用'users'键，它是一个平面列表道具的数组。

怎么样？如何获取用户密钥。你能告诉我吗

将您的数据放入一个新变量中，然后使用 temp['users']。 temp 是变量的名称。您可以通过 console.log() 进行检查

非常抱歉。我是一个新人。请编辑我的代码。请

【参考方案2】：

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

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

希望这对你有用。

【讨论】：

不工作。不在平面列表中显示数据

或者像data = value['users']那样做。还要检查您是否收到 console.log(value.users)

的任何信息

不，没有获得价值。控制台日志文件也无法打印任何内容

snack.expo.dev/zrOxY8QZp 看看这个。在那里工作正常

项目不工作。控制台日志没有得到任何数据