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})는 데이터가 여전히 약속이고 아직 해결되지 않았음을 의미합니다. 비동기 함수를 사용하여 전달할 수 있습니다.

Answer 2

storeJson 함수 호출을 JSX 외부로 이동할 수 있습니다. 아마도 부작용 함수인 useEffect를 사용하여 이를 관리할 수 있습니다.

으아아아