Question

我目前正在尝试遍历嵌套对象，然后从那里映射值，但它没有呈现。

Object {
  "classTags": Object {
    "Test Class v2": "f4e2754d-90e5-4904-b9b7-af6c7e66f4ff",
  },
  "termTags": Object {},
  "userTags": Object {
    "User tag": "bbb658b9-e897-4e6c-b949-bc6db64dff3d",
  },
}

我当前的代码如下所示：

{Object.keys(taskTags).forEach((key) => {
    Object.keys(taskTags[key]).map((task) => (
         <View
              style={{
                  backgroundColor: colors.primary,
                  padding: 6,
                  paddingRight: 10,
                  borderRadius: 8,
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  marginRight: 0,
                  marginBottom: 6,
              }}
         >
         <Text
             style={{
                 fontSize: 16,
                 color: colors.light,
                 fontWeight: "bold",
                 marginRight: 10,
             }}
         >
             {task}
         </Text>
         <TouchableOpacity
             onPress={() => {          
                 console.log("do something");
             }}
         >
             <Icon name="times" size={16} color={colors.light} />
         </TouchableOpacity>
     </View>
 ));
})}

因为它没有渲染，所以我猜我没有正确地实现映射，但是当使用相同的逻辑到 console.log 对象时，它可以正确打印。

我在这里做错了什么？

Answer 1

我认为它不起作用的原因是我们没有从定义的第一个函数返回。应该是：

{Object.keys(taskTags).forEach((key) => {
  return Object.keys(taskTags[key]).map((task) => (
     <View
          style={{
              backgroundColor: colors.primary,
              padding: 6,
              paddingRight: 10,
              borderRadius: 8,
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              marginRight: 0,
              marginBottom: 6,
          }}
     >
     <Text
         style={{
             fontSize: 16,
             color: colors.light,
             fontWeight: "bold",
             marginRight: 10,
         }}
     >
         {task}
     </Text>
     <TouchableOpacity
         onPress={() => {          
             console.log("do something");
         }}
     >
         <Icon name="times" size={16} color={colors.light} />
     </TouchableOpacity>
 </View>
 ));
})}

您还需要放置 map 数组方法，以返回项目数组，因为 forEach 不会返回任何内容。 Szyman Pancerz's answer 解释得很好。

Answer 2

这是因为您没有正确地将映射值返回给组件渲染。你应该这样做：

{Object.keys(taskTags).map((key) => 
   Object.keys(taskTags[key]).map((task) => (
         <View
              style={{
                  backgroundColor: colors.primary,
                  padding: 6,
                  paddingRight: 10,
                  borderRadius: 8,
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  marginRight: 0,
                  marginBottom: 6,
              }}
         >
         <Text
             style={{
                 fontSize: 16,
                 color: colors.light,
                 fontWeight: "bold",
                 marginRight: 10,
             }}
         >
             {task}
         </Text>
         <TouchableOpacity
             onPress={() => {          
                 console.log("do something");
             }}
         >
             <Icon name="times" size={16} color={colors.light} />
         </TouchableOpacity>
     </View>
 )))}

这将返回正确的映射组件数组。

React：通过嵌套对象进行映射和渲染

2 个答案: