坚持"独特的钥匙"警告

Question

我目前正在为待办事项应用程序调整Mobx教程.链接 我想要做的是为每个渲染列表项添加一个简单的计数器按钮.我认为这将非常简单,但我必须做出语法错误,因为我无法正确地进行网格划分.我现在遇到的主要错误是"数组或迭代器中的每个子节点都必须具有唯一的'key'属性".我想我会通过向每个计数器添加一个uuid来解决这个问题(计数器是导致错误开始出现的原因).唉,我似乎无法找到解决方案.

这是应用程序的github存储库:https://github.com/Darthmaul/UmCount

具体来说,这个文件是收到最多修改的文件.我还添加了一个"countertore.js"文件来保持计数器的存储不变(这似乎是失败的).

任何帮助,将不胜感激.在这一点上,我只是不知道什么是错的,什么是对的.

谢谢,

安德鲁

Answer 1

当你有一个包含子数组的组件时,每个子组件都可能有自己的子组件,不仅顶级子组件而且更深层次的每个子组件都需要自己的键.

做的问题

const Items = ({items}) => (
  <View style={{flex: 1, paddingTop: 10}}>
   {items.map((item, i) => {
        return (<View>
          <Text style={styles.item} key={i}>• {item} - {store.counter}</Text>
          <Button onPress={() => store.increment()} title="+1" color="#50EB5D" key={uuid()} />
          </View>
        )})
    }
  </View>
)

是你的Text和Button组件有钥匙,但你View的没有.

React使用密钥进行协调,并在组件列表发生更改时查找最小变化.如果您在阵列更改时在此处设置密钥将影响协调策略:您可以设置您的View,Text并且Button如果您知道每当其中一个更改时,每个数组元素都具有相同的密钥,整个行都会更改,但如果每个都更改单独更改,然后您应为每个更改生成一个唯一的ID.

在对帐和密钥上反应文档.