Kaedah pelaksanaan React Native untuk menyimpan nilai JSON sebagai pasangan nilai kunci

Question

Saya memaparkan nama dan ID syarikat daripada json yang disimpan dalam companyData dan menyimpannya sebagai kunci dan nilai secara serentak menggunakan storan async dalam React Native. Saya mendapat ralat berikut, jadi saya menggunakan JSON.stringify untuk menukar kedua-dua nilai kepada rentetan sebelum menyimpannya sebagai pasangan nilai utama, tetapi saya masih mendapat ralat yang sama

[Ralat: Objek tidak boleh dijadikan anak React (objek ditemui dengan kekunci {_h, _i, _j, _k}). Jika anda ingin membuat sekumpulan elemen anak, gunakan tatasusunan sebaliknya. ]

Saya mahu menyimpannya sebagai pasangan nilai utama supaya saya boleh menggunakan nilai dalam komponen lain. Sebarang bantuan amatlah dihargai

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

Jangan gunakan fungsi storeJson dalam JSX. Kerana setiap rendering komponen akan menjalankan fungsi storeJson anda sekali lagi. Anda boleh menambah butang untuk menyimpan data. Atau anda boleh menambah fungsi ini untuk useEffect. Anda perlu memastikan fungsi ini hanya berjalan sekali.

{_h, _i, _j, _k}) bermakna data itu masih janji dan belum diselesaikan. Anda boleh menggunakan fungsi async untuk menghantarnya.

Answer 2

Anda boleh mengalihkan panggilan fungsi storeJson ke luar JSX, mungkin menggunakan fungsi kesan sampingan useEffect untuk mengurusnya.

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;