React Native AsyncStorage调用getData方法出现空白页错误

页面渲染空白是代码写法错误导致的，核心问题有4个：

• 直接在JSX渲染代码块中调用storeData(value)、getData()两个异步函数。React渲染流程是同步执行的，组件每次触发重渲染都会执行这两个异步方法，异步操作触发状态更新后又会触发新一轮渲染，最终形成无限重渲染循环，直接卡死渲染线程导致白屏。
• 两个异步方法的catch块完全为空，运行时抛出的所有错误都被静默吞掉，控制台看不到任何报错信息，无法快速定位问题。
• getData方法拿到存储值后，没有通过React状态机制把值同步到TextInput的绑定属性上，即使读取成功也无法正常渲染内容。
• 没有按照React副作用逻辑的执行规范放置代码，存储、读取这类带副作用的异步逻辑，不能直接写在渲染执行路径中。

使用React内置的状态Hook、副作用Hook管理逻辑，把读写操作放到合适的触发时机，参考实现如下：

import React, { useState, useEffect } from 'react';
import { View, TextInput } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const STORAGE_KEY = "@storage_Key";

export default function LocalStorageDemo() {
  // 绑定输入框的状态值
  const [inputValue, setInputValue] = useState<string>('');

  // 数据存储方法
  const storeData = async (value: string) => {
    try {
      await AsyncStorage.setItem(STORAGE_KEY, value);
    } catch (e) {
      // 禁止空catch块，打印错误方便排查问题
      console.error('本地存储写入失败:', e);
    }
  };

  // 数据读取方法
  const getData = async () => {
    try {
      const storedValue = await AsyncStorage.getItem(STORAGE_KEY);
      if (storedValue !== null) {
        // 读取成功后同步到状态，驱动视图更新
        setInputValue(storedValue);
      }
    } catch (e) {
      console.error('本地存储读取失败:', e);
    }
  };

  // 仅在组件首次挂载完成后，执行一次读取逻辑
  useEffect(() => {
    getData();
  }, []);

  return (
    <View>
      <TextInput
        editable
        value={inputValue}
        onChangeText={(text) => {
          setInputValue(text);
          // 存储逻辑放到输入事件回调中触发，不要放在渲染块里
          // 高频输入场景可以加防抖，等用户停止输入300ms后再执行存储，减少性能开销
          storeData(text);
        }}
      />
    </View>
  );
}

• AsyncStorage仅支持存储字符串类型，如果需要存对象、数组等结构化数据，写入时需要用JSON.stringify()转成字符串，读取时用JSON.parse()转回对应结构。
• 所有异步副作用逻辑（接口请求、本地存储读写、定时器等）都不能直接放在JSX渲染块中执行，要放到事件回调、useEffect这类专门处理副作用的位置。
• 不要使用空的catch块吞掉错误，至少添加错误日志打印，否则出现问题时没有任何排查线索。

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