Méthode d'implémentation React Native pour stocker les valeurs JSON sous forme de paires clé-valeur

Question

J'affiche le nom de l'entreprise et l'ID de json stockés dans companyData et je les stocke simultanément en tant que clé et valeur en utilisant le stockage asynchrone dans React Native. J'ai eu l'erreur suivante, j'ai donc utilisé JSON.stringify pour convertir les deux valeurs en chaînes avant de les stocker sous forme de paires clé-valeur, mais j'obtiens toujours la même erreur

[Erreur : l'objet ne peut pas devenir un enfant React (objet trouvé avec les clés {_h, _i, _j, _k}). Si vous souhaitez afficher un groupe d'éléments enfants, utilisez plutôt un tableau. ]

Je souhaite les stocker sous forme de paires clé-valeur afin de pouvoir utiliser les valeurs dans un autre composant. Toute aide est grandement appréciée

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

N'utilisez pas la fonction storeJson dans JSX. Parce que chaque rendu du composant exécutera à nouveau votre fonction storeJson. Vous pouvez ajouter un bouton pour stocker des données. Ou vous pouvez ajouter cette fonction à useEffect. Vous devez vous assurer que cette fonction ne s'exécute qu'une seule fois.

{_h, _i, _j, _k}) signifie que les données sont toujours une promesse et n'ont pas encore été résolues. Vous pouvez utiliser une fonction asynchrone pour le transmettre.

Answer 2

Vous pouvez déplacer l'appel de fonction storeJson en dehors de JSX, peut-être en utilisant la fonction d'effet secondaire useEffect pour le gérer.

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;