前端之家

  1. 首页
  2. 问答

如何使用.map（）渲染此javascript对象中的数据？

• 问答

我通过组合Firebase数据库中的数据构造了以下javascript对象：

[
  {
    "-Lsx4Wzd4k7Xamoxoior": {
      "groupId": "-Lsx4Wzd4k7Xamoxoior","numMembers": 1,"groupName": "GroupOne","imageUrl": ""
    },"-Lsx4aoXcClZrOMN3zR_": {
      "uid": "-Lsx4aoXcClZrOMN3zR_","groupName": "GroupTwo","-Lsxzv0N9owZ7cWiH-H_": {
      "uid": "-Lsxzv0N9owZ7cWiH-H_","groupName": "Groupthree","imageUrl": ""
    }
  }
]

我将groupsData状态设置为此对象。我想使用map（）函数在其自己的视图中呈现每个组的数据。

这是到目前为止我在render（）方法中尝试过的方法；加载后，它什么也没显示：

  render() {
    return (
      <ScrollView>
        {this.state.groupsData.map(groupData => {
          return (
            <View>
              <Text>{groupData.groupName}</Text>
              <Text>{groupData.numMembers} members</Text>
              <Image source={{ uri: groupData.imageUrl }} />
              <TouchableOpacity onPress={() => navigate('GroupScreen',{ groupUid: groupData.groupUid })} >
                <Text>View group</Text>
              </TouchableOpacity>
            </View>
          );
        })}
      </ScrollView>
    );
  }

任何帮助将不胜感激；我以前从未使用过map（）。

chenhui651 回答：如何使用.map（）渲染此javascript对象中的数据？

首先， groupData 在数组中只有一个对象。如果我正确理解，您的用例就是显示组数据。将 groupData 状态值修改为

const groupData ={
        "-Lsx4Wzd4k7Xamoxoior": {
            "groupId": "-Lsx4Wzd4k7Xamoxoior","numMembers": 1,"groupName": "GroupOne","imageUrl": ""
        },"-Lsx4aoXcClZrOMN3zR_": {
            "uid": "-Lsx4aoXcClZrOMN3zR_","groupName": "GroupTwo","-Lsxzv0N9owZ7cWiH-H_": {
            "uid": "-Lsxzv0N9owZ7cWiH-H_","groupName": "GroupThree","imageUrl": ""
        }
    };

这是一个对象，密钥是Firebase发送的内容。现在使用Object.keys（）进行迭代。为：

<ScrollView>
            {Object.keys(data).map(key => {
                const group = data[key];
                return (
                    <View>
                        <Text>{group.groupName}</Text>
                        <Text>{group.numMembers} members</Text>
                        <Image source={{ uri: group.imageUrl }} />
                        <TouchableOpacity onPress={() => navigate('GroupScreen',{ groupUid: group.groupUid })} >
                            <Text>View group</Text>
                        </TouchableOpacity>
                    </View>
                );
            })}
        </ScrollView>

希望这会有所帮助！

react-native
本文链接：https://www.f2er.com/3155086.html

大家都在问