javascript - Reactjs 将 key prop 分配给数组渲染组件

Question

我正在使用数组映射函数渲染一些组件，并且我得到“数组或迭代器中的每个子项都应该有一个唯一的“key”属性。”警告。我知道我确实必须将关键 Prop 分配给数组渲染的组件。

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

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

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>
   );
})

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