React Native-Implementierungsmethode zum Speichern von JSON-Werten als Schlüssel-Wert-Paare

Question

Ich zeige den Firmennamen und die ID von JSON an, die in CompanyData gespeichert sind, und speichere sie gleichzeitig als Schlüssel und Wert mithilfe der asynchronen Speicherung in React Native. Ich habe die folgende Fehlermeldung erhalten, also habe ich JSON.stringify verwendet, um beide Werte in Zeichenfolgen umzuwandeln, bevor ich sie als Schlüsselwertpaare gespeichert habe, aber ich erhalte immer noch die gleiche Fehlermeldung

[Fehler: Objekt kann nicht zu einem React-Kind gemacht werden (Objekt mit Schlüsseln {_h, _i, _j, _k} gefunden). Wenn Sie eine Gruppe untergeordneter Elemente rendern möchten, verwenden Sie stattdessen ein Array. ]

Ich möchte sie als Schlüssel-Wert-Paare speichern, damit ich die Werte in einer anderen Komponente verwenden kann. Wir freuen uns über jede Hilfe

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;