React Native图书追踪应用报错：anotherRandomArray未定义

你遇到的ReferenceError: Property 'anotherRandomArray' doesn't exist错误，核心是两个基础问题导致的，和React Native本身无关：

1. 直接赋值给未声明的变量
2. 在AsyncStorage异步操作未完成时就尝试使用变量

具体修复步骤： #

• 声明组件状态变量
  不要使用未声明的全局/局部变量存储异步数据，React组件中必须用useState声明状态来管理这类数据，确保数据更新能触发组件重新渲染：

  import { useState, useEffect } from 'react';
  import AsyncStorage from '@react-native-async-storage/async-storage';
  
  const BookTracker = () => {
    // 声明状态变量存储图书数据
    const [bookList, setBookList] = useState([]);
  

• 异步操作中正确更新状态
  在useEffect的异步函数内，获取到存储数据后通过状态更新函数赋值，而非直接给未声明变量赋值：

  useEffect(() => {
      const loadStoredBooks = async () => {
        try {
          const storedBooks = await AsyncStorage.getItem('savedBooks');
          // 数据存在时解析并更新状态
          if (storedBooks) {
            setBookList(JSON.parse(storedBooks));
          }
        } catch (err) {
          console.error('读取存储数据失败:', err);
        }
      };
  
      loadStoredBooks();
    }, []);
  

• 处理异步加载中的渲染逻辑
  异步操作完成前，状态变量会保持初始值（比如空数组），渲染时要先判断数据是否就绪，避免访问未初始化的内容：

  return (
      <View>
        {bookList.length === 0 ? (
          <Text>正在加载图书数据...</Text>
        ) : (
          // 渲染图书列表
          <FlatList
            data={bookList}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => <Text>{item.title}</Text>}
          />
        )}
      </View>
    );
  };
  
  export default BookTracker;
  

你提到更换变量也无法解决，本质是每次更换的变量都没遵循状态管理规范，要么没声明，要么还是在异步未完成时直接使用。同事出现相同问题，说明团队需要统一异步数据处理的规范，避免这类基础错误。

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