Деконструкция объекта в реактив-нативе

Question

У меня есть такая структура:

Я хочу получить доступ к URI в качестве ключа и его значение в качестве значения. Как мне это сделать?

Это то, что я пробовал, и ключ, который я получаю, это images Остальные данные - это значение

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>
  );
};

Мне нужно разобрать это данные, чтобы я мог сохранить его как изображение, потому что есть изображение base64. Я прокомментировал свой компонент Image для отладки

Вот как я читаю данные из 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);
      });
  }

в ImagesToDisplay я передаю консоль this.state.images .log (images) выглядит так URI - base64, поэтому он очень длинный

Answer 1

Вы можете использовать Object.values(images).map(obj => Object.entries(obj)).flat();

Пример:

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 2

Спасибо за помощь, я отредактировал метод, поэтому в Object.entries я передаю images.images, и он решает проблему.

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>
  );
};

Answer 3

ну, похоже, ключом будет имя изображения "M ...", я думаю, что в вашем случае оно будет работать, если вы сделаете

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

Это будет гораздо понятнее, если вы разместили фактический массив изображений, полученный от db