在 react-native 中解构 object

Question

I have this kind of structure:

I want to acces uri as key and its value as value. How i should do it?

This is what I tried and the key I get is images rest of the data is value

const ImagesToDisplay = images => {
  let imagesMap = Object.entries(images);
  console.log('Images object' + JSON.stringify(images));
  return (
    <View>
      {imagesMap.map(([key, value]) => (
        // <Image style={styles.avatar} key={key} source={key + value} />
      <Text>{key}</Text>
      ))}
    </View>
  );
};

I need to deconstruct this data so i could store it as image, because there is base64 image. I have commented my Image component now, for debugging

This is how i read data from firebase:

readUserData() {
    firebase
      .database()
      .ref('/users/' + firebase.auth().currentUser.uid)
      .once('value')
      .then(snapshot => {
        let data = snapshot.val();
        this.setState({
          id: data.fbid,
          profilePictureUrl: data.profile_picture,
          nickname: data.nickname,
          userInterest: data.userInterest,
          description: data.description,
          images: data.images,
        });
        // console.log(data);
      });
  }

to ImagesToDisplay i pass this.state.images Console.log(images) looks like this uri is base64 so its very long

Answer 1

well, it looks like the key will be "M..." image name, i think in your case it will work if you do

Object.values(images).map(el => { return <div key={Object.entries(el)[0][0]}>{Object.entries(el)[0][1]}</div>)})

It will be much clearer if you posted the actual images array that you receive from db

Answer 2

You could use Object.values(images).map(obj => Object.entries(obj)).flat();

Example:

 const images = { 'jssjsks': { uri: 'uri1' }, 'wjqwhqwj': { uri: 'uri2' } }; let imagesMap = Object.values(images).map(obj => Object.entries(obj)).flat(); // 1. `Object.values(images)` returns `[{ uri: 'uri1' }, { uri: 'uri2' }]` // 2. Then `.map(obj => Object.entries(obj))` returns `[[['uri', 'uri1']], [['uri', 'uri2']]]` // 3. Finally `.flat()` produces the wanted result `[['uri', 'uri1'], ['uri', 'uri2']]` // console.log(imagesMap) imagesMap.forEach(([key, value]) => { console.log(key) console.log(value) })

Answer 3

Thanks for help I edited the method, so in Object.entries I pass images.images and it solves problem.

const ImagesToDisplay = images => {
  let imagesMap = Object.entries(images.images);
  // console.log('Images object' + JSON.stringify(images.images));
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      {imagesMap.map(([key, value]) => {
        return <Image style={styles.avatar} key={key} source={value} />;
        // <Text style={styles.avatar}>{key}</Text>;
      })}
    </View>
  );
};