我试图用异步函数将一个对象放入一个数组,但是数组在对象加载之前就被填充了,因此在数组中放入了一个空对象。
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上的完整项目
1条答案
按热度按时间fhity93d1#
newItem
在下一次渲染之前不会被更新。newItem
尚未更新为itemdata
的值。最简单的方法是使用itemdata更新cartItems: