react-native – 坚持“唯一密钥”警告

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

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

特别是this file是收到最多修改的那个.我还添加了一个“countertore.js”文件来保持计数器的存储不变(这似乎是失败的).

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

谢谢,

安德鲁

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

做的问题

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

是你的文本和按钮组件有键,但你的视图没有.

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

React docs on reconciliation and keys.