React Native存储JSON键值对报错：对象无法作为React子元素

你报错的核心是在JSX渲染流程里直接调用了异步函数storeJson。这个异步函数返回的是Promise对象，React会把它当作React子节点去渲染，但Promise并不是合法的React子元素，所以才会出现包含_h, _i, _j, _k键的对象报错（这些是Promise内部的状态属性）。

把数据存储逻辑从渲染阶段移到useEffect副作用钩子中——React的渲染阶段只负责处理UI渲染，存储数据这类副作用操作必须放在useEffect里执行，避免重复执行和渲染错误。

具体修复步骤 #

• 用useEffect包裹存储逻辑，确保组件挂载时只执行一次存储（或在companyData变化时重新存储）
• 无需在渲染循环里逐个调用storeJson，可以遍历companyData.accounts一次性完成所有存储，也可以直接存储整个对象（后续批量读取更方便）

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

const companyDatas = {
  "accounts": {
    "company 1 ": {
      "id": "4",
      "enabled": "1"
    },
    "company 2": {
      "id": "2",
      "enabled": "1"
    },
    "company 3": {
      "id": "1",
      "enabled": "1"
    }
  }
};

const YourComponent = () => {
  const [companyData, setCompanyData] = useState(companyDatas);

  // 用useEffect处理存储逻辑
  useEffect(() => {
    const storeCompanies = async () => {
      try {
        // 遍历accounts，逐个存储公司名称与ID的键值对
        const entries = Object.entries(companyData.accounts);
        for (const [companyName, accountInfo] of entries) {
          await AsyncStorage.setItem(companyName, accountInfo.id);
        }
        console.log("公司数据存储成功");
      } catch (e) {
        console.error("存储失败:", e);
      }
    };

    storeCompanies();
  }, [companyData]); // 依赖companyData，当它变化时重新执行存储

  return (
    <View style={styles.container}>
      {Object.entries(companyData.accounts).map(([company, accountData]) => (
        <View key={company}>
          <Text style={[styles.textRoad, styles.capital]}>{company} - ID: {accountData.id}</Text>
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  textRoad: {
    fontSize: 16,
  },
  capital: {
    textTransform: 'capitalize',
  },
});

export default YourComponent;

额外优化建议 #

如果后续需要批量读取这些公司数据，也可以直接把整个companyData.accounts对象转成字符串存储，读取时更便捷：

// 存储时
await AsyncStorage.setItem('companyAccounts', JSON.stringify(companyData.accounts));

// 读取时
const storedData = await AsyncStorage.getItem('companyAccounts');
const companyAccounts = storedData ? JSON.parse(storedData) : {};

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