react-native - 卡在 "unique key"警告上

Question

我目前正在为一个待办事项应用改编 Mobx 教程。 link
我想要做的是为每个呈现的列表项添加一个简单的计数器按钮。我想这会很简单，但我一定是犯了一个语法错误，因为我无法让事物正确地啮合。我现在遇到的主要错误是“数组或迭代器中的每个子项都必须具有唯一的‘key’属性”。我想我可以通过向每个计数器添加一个 uuid 来解决这个问题(计数器是导致错误开始出现的原因)。唉，我似乎找不到解决办法。

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

具体this file是修改最多的一个。我还添加了一个“counterstore.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组件有 key ，但您的 View不。

当组件列表发生变化时，React 使用键进行协调并找到最小的变化。当您的阵列更改时，您在此处设置键的方式将影响对帐策略:您可以设置您的 View , Text和 Button对于每个数组元素都具有相同的键，如果您知道每当其中一个更改时，整行都会更改，但是如果每个元素分别更改，那么您应该为每个元素生成一个唯一的 ID。

React docs on reconciliation and keys .