Reactjs为数组渲染组件分配关键道具

Question

我正在使用数组映射函数渲染一些组件，我得到“数组中的每个子节点或迭代器应该有一个唯一的”键“prop。”警告。我知道我必须为数组渲染组件分配关键道具。

我的问题是，我是否必须将键分配给map函数内部的最外部组件（本例为View），还是必须将键分配给最外层组件视图中的每个元素？

如果是后者，那么我认为为每个组件分配密钥效率有点低？有什么方法可以解决这个问题吗？谢谢

this.state.Store.City.map((item) => {
        return <View>
          <TouchableOpacity onPress={() => this.onQueryInputChange(item)}>
            <Text style={{ fontSize: 20, paddingVertical: 10 }}>
              {item.fullName}
            </Text>
          </TouchableOpacity>
        </View>
      })

Answer 1

如果item中没有id，则可以使用item数组索引，如果列表不会被重新排序或重新组织：

this.state.Store.City.map((item, index) => {
   return (
     <View key={index}>
      <TouchableOpacity onPress={() => this.onQueryInputChange(item)}>
        <Text style={{ fontSize: 20, paddingVertical: 10 }}>
          {item.fullName}
        </Text>
      </TouchableOpacity>
     </View>
   );
})

只有最外面的组件需要一个键来跟踪每个项目。

Answer 2

你应该为最外面的组件分配一个键（这里它将是View组件）这里是documentation

如果item有ìd属性你可以写

this.state.Store.City.map((item) => {
   return (
     <View key={item.id}>
      <TouchableOpacity onPress={() => this.onQueryInputChange(item)}>
        <Text style={{ fontSize: 20, paddingVertical: 10 }}>
          {item.fullName}
        </Text>
      </TouchableOpacity>
     </View>
   );
})