儲存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;