Javascript 将关键道具指定给阵列渲染组件

我正在使用数组映射函数渲染一些组件，并得到“数组或迭代器中的每个子级都应该有一个唯一的“键”属性。”警告。我知道我必须为阵列渲染组件指定关键道具

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

如果是后者，那么我认为为每个组件分配密钥有点低效？有没有办法解决这个问题？多谢各位

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

this.state.Store.City.map（（项）=>{
返回
此.onQueryInputChange（项目）}>
{item.fullName}
})

您应该为最外部的组件分配一个键（这里是

查看

组件） 这是你的电话号码

如果项具有

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

this.state.Store.City.map（（项）=>{
返回(
此.onQueryInputChange（项目）}>
{item.fullName}
);
})

您应该为最外部的组件分配一个键（这里是

查看

组件） 这是你的电话号码

如果项具有

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

this.state.Store.City.map（（项）=>{
返回(
此.onQueryInputChange（项目）}>
{item.fullName}
);
})

如果您在

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

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

this.state.Store.City.map（（项目，索引）=>{
返回(
此.onQueryInputChange（项目）}>
{item.fullName}
);
})

只有最外层的组件需要一个键来跟踪每个项目。
如果您在
项目中没有id，如果列表不会重新排序或重新组织，您可以使用项目数组索引：

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

this.state.Store.City.map（（项目，索引）=>{
返回(
此.onQueryInputChange（项目）}>
{item.fullName}
);
})

只有最外层的组件需要一个键来跟踪每个项目。
最外层的元素需要一个键。在您的情况下，将关键道具添加到视图中。其他元件不需要。最外面的元件需要钥匙。在您的情况下，将关键道具添加到视图中。其他元素不需要。谢谢你的回答！我解决了，真的很感激！谢谢你的回答！我解决了，真的很感激！