Question

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

[
  {
    "-Lsx4Wzd4k7Xamoxoior": {
      "groupId": "-Lsx4Wzd4k7Xamoxoior",
      "numMembers": 1,
      "groupName": "GroupOne",
      "imageUrl": ""
    },
    "-Lsx4aoXcClZrOMN3zR_": {
      "uid": "-Lsx4aoXcClZrOMN3zR_",
      "numMembers": 1,
      "groupName": "GroupTwo",
      "imageUrl": ""
    },
    "-Lsxzv0N9owZ7cWiH-H_": {
      "uid": "-Lsxzv0N9owZ7cWiH-H_",
      "numMembers": 1,
      "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（）。

Answer 1

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

const groupData ={
        "-Lsx4Wzd4k7Xamoxoior": {
            "groupId": "-Lsx4Wzd4k7Xamoxoior",
            "numMembers": 1,
            "groupName": "GroupOne",
            "imageUrl": ""
        },
        "-Lsx4aoXcClZrOMN3zR_": {
            "uid": "-Lsx4aoXcClZrOMN3zR_",
            "numMembers": 1,
            "groupName": "GroupTwo",
            "imageUrl": ""
        },
        "-Lsxzv0N9owZ7cWiH-H_": {
            "uid": "-Lsxzv0N9owZ7cWiH-H_",
            "numMembers": 1,
            "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>

希望这会有所帮助！

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

1 个答案: