React Native中如何确保对象加载完成后再存入数组？

一、解决异步加载导致的空数组/重复数据问题 #

核心问题是组件初始化时异步读取操作未完成就更新状态，且未处理重复添加的情况。按以下方式调整：

• 初始化cartItems状态为空数组，不要提前填充空对象
• 把异步读取逻辑封装在useEffect内部，依赖项设为空数组，确保仅在组件挂载时执行一次
• 读取数据后先校验有效性，再更新状态，避免重复追加旧数据

示例代码：

import { useEffect, useState } from 'react';
import { AsyncStorage, FlatList, Text } from 'react-native';

export default function CartScreen() {
  const [cartItems, setCartItems] = useState([]);

  useEffect(() => {
    const loadCartItems = async () => {
      try {
        const storedItem = await AsyncStorage.getItem('@cartItem');
        const newItem = storedItem ? JSON.parse(storedItem) : null;
        
        // 仅当数据有效时更新状态，同时避免重复添加
        if (newItem) {
          setCartItems(prev => {
            // 假设商品对象有唯一id，用来判断是否已存在
            const isDuplicate = prev.some(item => item.id === newItem.id);
            return isDuplicate ? prev : [...prev, newItem];
          });
        }
      } catch (error) {
        console.error('加载购物车数据失败:', error);
      }
    };

    loadCartItems();
  }, []); // 空依赖避免无限循环

  // 后续渲染逻辑
}

二、修复FlatList渲染路径问题 #

需要用item.item.itemTitle才能读取到数据，说明你的cartItems数组里的每一项都被额外嵌套了一层item对象。可以从两个方向解决：

1. 修正存储逻辑：存入@cartItem时直接存商品对象，不要嵌套item层。比如：

// 存储时的正确写法
await AsyncStorage.setItem('@cartItem', JSON.stringify({ itemTitle: '商品名称', id: 1 }));

2. 读取时解构嵌套：如果已经存储了嵌套结构，读取后先取出真实的商品对象：

const newItem = storedItem ? JSON.parse(storedItem) : null;
if (newItem) {
  // 取出嵌套的真实商品对象
  const actualItem = newItem.item || newItem;
  setCartItems(prev => [...prev, actualItem]);
}

调整后FlatList渲染时就可以用item.itemTitle：

<FlatList
  data={cartItems}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => (
    <Text>{item.itemTitle}</Text>
  )}
/>

三、避免useEffect无限循环 #

之前把newItem加入依赖导致无限循环，是因为每次组件渲染时newItem的引用都会变化（即使值相同），触发useEffect重复执行。解决方法：

• 不要把newItem放入依赖数组，而是将异步读取逻辑完全封装在useEffect内部
• 只有当需要监听特定状态（比如用户登录状态）重新加载数据时，再把对应状态加入依赖

内容的提问来源于stack exchange，提问作者ArneS