存储JSON值为键值对的React Native实现方法

Question

我正在从存储在companyData中的json中显示公司名称和ID，并同时使用React Native中的异步存储将它们存储为键和值。我遇到了以下错误，所以在将它们存储为键值对之前，我使用JSON.stringify将两个值都转换为字符串，但是我仍然遇到相同的错误

[错误：对象无法作为React子元素（找到具有键{_h，_i，_j，_k}的对象）。如果您想渲染一组子元素，请改用数组。]

我希望将它们存储为键值对，以便我可以在另一个组件中使用这些值。非常感谢任何帮助

const companyDatas = {
        "accounts": {
            "company 1 ": {
                "id": "4",
                "enabled": "1"
            },
            "company 2": {
                "id": "2",
                "enabled": "1"
            },
            "company 3": {
                "id": "1",
                "enabled": "1"
            }
        }
      };
    
     const storeJson = async (value1,value2) => {
      try {
        await AsyncStorage.setItem(value1,value2);
       
      } catch (e) {
        // saving error
      }
    };
    
      const [companyData, setCompanyData] = useState(companyDatas)
    
      return (
        <View style={styles.container}>
          {
            Object.entries(companyData.accounts)
            .map(([company, accountData]) => (
              <View key={company}>

                <Text style={[styles.textRoad, styles.capital]}>{company}{accountData.id}</Text>
                     { storeJson(JSON.stringify(company),JSON.stringify(accountData.id))}

                
              </View>
            ))
          }
        </View>
      );
    }

Answer 1

在JSX中不要使用storeJson函数。因为这样组件的每次渲染都会再次运行你的storeJson函数。你可以添加一个按钮来存储数据。或者你可以将这个函数添加到useEffect中。你需要确保这个函数只运行一次。

{_h, _i, _j, _k}）表示数据仍然是一个promise，并且尚未解决。你可以使用异步函数来传递它。

Answer 2

你可以将storeJson函数的调用移到JSX之外，可能使用副作用函数useEffect来管理。

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

const storeJson = async (value1, value2) => {
  try {
    await AsyncStorage.setItem(value1, value2);
  } catch (e) {
    
  }
};

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

  useEffect(() => {
    Object.entries(companyData.accounts).forEach(([company, accountData]) => {
      storeJson(JSON.stringify(company), JSON.stringify(accountData.id));
    });
  }, [companyData]);

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

export default App;