React Native使用AsyncStorage存储本地JSON文件读取返回null的问题排查

代码中存在的3个直接问题 #

• JSON导入方式错误：import * as data from "../data.json"导入的是带default属性的模块包装对象，而非JSON文件本身的纯数组内容。就算后续存储流程走通，序列化后写入的结构也不是你预期的目标数据，React Native原生支持直接通过默认导入获取本地JSON的纯数据。
• 事件传参完全错位：TouchableOpacity的onPress触发时，会将触摸事件对象作为参数传入绑定的函数。当前setLocalItem接收的形参实际是触摸事件，根本没有传入你要存储的本地JSON数据，相当于从保存环节就没有把目标内容写进存储。
• 空catch块屏蔽所有异常：存储逻辑中的空catch (error) {}会吞掉所有执行错误（比如序列化失败、存储写入报错），你完全感知不到保存步骤已经执行失败，自然读取时会返回null。

修复后可直接运行的代码 #

import AsyncStorage from '@react-native-async-storage/async-storage';
// 直接默认导入，即可拿到JSON对应的纯数据数组
import localData from "../data.json";

// 存储函数不依赖事件传参，直接使用导入的目标数据
const saveLocalData = async () => {
    try {
        const jsonValue = JSON.stringify(localData)
        await AsyncStorage.setItem('@storage_Key', jsonValue);
        console.log('数据已成功写入本地存储')
    } catch (error) {
        // 打印真实报错，不再隐藏异常
        console.log('写入失败，错误详情：', error);
    }
};

const getLocalItem = async () => {
    try {
        const jsonValue = await AsyncStorage.getItem('@storage_Key')
        console.log('读取到的原始存储值：', jsonValue);
        return jsonValue != null ? JSON.parse(jsonValue) : null;
    } catch (e) {
        console.log('读取失败，错误详情：', e);
    }
}

// 界面组件
<>
    <TouchableOpacity onPress={saveLocalData}>
        <Text>保存文件</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={getLocalItem}>
        <Text>读取文件</Text>
    </TouchableOpacity>
</>

额外注意事项 #

• 异步存储的写入操作有执行时序，需要等saveLocalData的Promise完全 resolve 之后再触发读取，否则可能因为写入未完成读到null。
• 不需要额外配置web端的JSON loader，RN原生解析流程就支持本地JSON文件的默认导入。

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