在 react-native 中解构对象答案

【问题标题】：Decosnstructing object in react-native在 react-native 中解构对象
【发布时间】：2020-04-27 11:31:44
【问题描述】：

我有这种结构：

我想访问 uri 作为键并将其值作为值。我该怎么做？

这是我尝试过的，我得到的关键是图像其余数据是价值

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 Console.log(images) 看起来像这样 uri 是 base64，所以它很长

【问题讨论】：

你用什么做存储？
Firebase 实时数据库
好的。如果您使用的是Rnfirebase SDK。您应该能够加载图像集合然后对其进行迭代。
好的，但我想解构对象，而不是更改数据库函数。因为我不仅获取图像数据。

标签： javascript react-native object

【解决方案1】：

好吧，看起来键将是“M ...”图像名称，我认为在您的情况下，如果您这样做，它将起作用

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

如果您发布从 db 收到的实际图像数组会更清楚

【讨论】：

用图像对象 console.logged 更新了问题。有了你的回答，我得到的价值是： {"-M5vHVgJ9EXTYRgJmdyT":{"uri":"data:image/jpeg;base64,/9j/4AAQSkZ 所以我们接近答案了
如果我 console.log(Object.entries(el)[0][1])) 它会给出图像。
是的，另一个给你钥匙，那我不知道你想要什么

【解决方案2】：

你可以使用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)
})

【讨论】：

【解决方案3】：

感谢帮助我编辑了方法，所以在 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>
  );
};

【讨论】：