加载对象后将其放入数组中,React Native

eni9jsuy  于 2022-12-30  发布在  React
关注(0)|答案(1)|浏览(125)

我试图用异步函数将一个对象放入一个数组,但是数组在对象加载之前就被填充了,因此在数组中放入了一个空对象。

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Button, FlatList, Image, Text, Pressable } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';

import ShoppingCart from '../components/CartItem';

const CartScreen = ({ navigation, route }) => {

  const [newItem, setNewItem] = useState([]);
  const [cartItems, setCartItems] = useState([]);
  
  const getData = async () => {
    try{
      AsyncStorage.getItem('@cartItem')
      .then((value) => {
        if (value != null) {
          let itemdata = JSON.parse(value);
          setNewItem(itemdata);
          setCartItems((currentItems) => [...currentItems, newItem]);
        }
      })
    } catch (error) {
      console.log(error);
    }
  }

  useEffect(() => {
    getData();
  }, []);


  return(

  <View style={styles.screen}>

    <Pressable onPress={() => {
      console.log(newItem);
      console.log(newItem.itemID);
      console.log(cartItems);
    }}>
      <ShoppingCart title={newItem.itemID}/>
    </Pressable>

    <FlatList
      keyExtractor={item => item.itemID}
      data={cartItems}
      renderItem={(item) => (
        <ShoppingCart
        title={item.item.itemTitle}
        />
        )}
    
    />

  </View>

  );

}

在这段代码中,您可以看到我将字符串从@cartItem解析为newItem
(我在屏幕上制作了一个指向console.log的按钮,可以看到数据正确地位于newItem中。)saving the file and pressing the log button once
然后我把这个newItem放到cartItems里面,cartItems是一个数组,作为我的购物车商品平面列表的数据,有趣的事情就发生在这里,它首先把一个空数组放到cartItems里面,我猜这是因为newItem还没有从AsyncStorage中获得它加载的数据。(DetailsScreen.js)它会更新(我想是因为useEffect)并将newItem正确地放入cartItems中,但现在我的平面列表中有一个空数组和正确的对象。when getting on the screen and pressing the button to log

**如何确保newItem在放入cartItems之前先得到它的值?**或者这根本不是问题所在?

我试过用

useEffect(() => {
    getData();
  }, [newItem]);

这形成无限循环,因为它保持更新,对于用cartItems替换newItem也是如此。
我还注意到我的平面列表中有一些奇怪的东西,我必须把item.item.itemTitle而不是item.itemTitle放在那里,如果有人知道这是怎么回事的话。
我的GitHub https://github.com/ArneSamson/ReactNative-store-app上的完整项目

fhity93d

fhity93d1#

newItem在下一次渲染之前不会被更新。

let itemdata = JSON.parse(value);
setNewItem(itemdata);
setCartItems((currentItems) => [...currentItems, newItem]);

newItem尚未更新为itemdata的值。最简单的方法是使用itemdata更新cartItems:

let itemdata = JSON.parse(value);
setNewItem(itemdata);
setCartItems((currentItems) => [...currentItems, itemdata]);

相关问题