遇到具有相同键[object object]`的两个子项。键应该是唯一的，以便组件在更新时维护它们的标识

Question

>

因为我刚使用React原生，有人能理解我这里的问题吗。如果是这样，请给出一个解决方案

从“React”导入React；从“react-native”导入{StyleSheet,TouchableOpacity,ScrollView}；从“本机基”导入{ListItem,Badge,Text}；

return(
    <ScrollView
        bounces={true}
        horizontal={true}
        style={{ backgroundColor: "#f2f2f2" }}
    >
        <ListItem style={{ margin: 0, padding: 0, borderRadius: 0 }}>
            <TouchableOpacity
                // Here the key is different
                key={1}
                onPress={() => {
                    props.categoryFilter('all'), props.setActive(-1)
                }}
            >
                <Badge
                    style={[styles.center, {margin: 5},
                        props.active == -1 ? styles.active : styles.inactive
                    ]}
                >
                    <Text style={{ color: 'white' }}>All</Text>
                </Badge>
            </TouchableOpacity>
            {props.categories.map((item) => (
                  <TouchableOpacity
          // Here the key is also different
                  key={item._id}
                  onPress={() => {
                      props.categoryFilter(item._id.$oid), 
                      props.setActive(props.categories.indexOf(item))
                  }}
              >
                  <Badge
                      style={[styles.center, 
                        {margin: 5},
                        props.active == props.categories.indexOf(item) ? styles.active : styles.inactive
                      ]}
                  >
                      <Text style={{ color: 'white' }}>{item.name}</Text>
                  </Badge>
              </TouchableOpacity>
            ))}
        </ListItem>
    </ScrollView>
)

导出默认CategoryFilter；

我想我有的问题是在toucAbleOpacity但两个组件中的键是不同的，但它仍然给出了警告

Answer 1

您必须将键设置为映射中的特定值，而不是包含2个对象的数组。Item._id似乎是一个包含2个对象的数组。所以做一个项目。也许是名字？