卡在"unique key"警告

Question

我当前正在为待办事项应用程序调整MOBX教程。关联我要做的是在每个渲染列表项目中添加一个简单的计数按钮。我认为这很简单，但是我一定会出现句法错误，因为我无法使事情正确地融合。我现在遇到的主要错误是"阵列或迭代器中的每个孩子都必须具有唯一的"键"属性"。我认为我会通过在每个计数器中添加一个UUID来解决此问题(计数器是导致错误开始出现的原因(。las，我似乎找不到解决方案。

这是应用程序的GitHub存储库：https：//github.com/darthmaul/umcount

特别是该文件是收到最多修改的文件。我还添加了一个" 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组件具有键，但是您的View S不。

React使用键进行对帐，并在组件列表更改时找到最小的变化。当您的数组更改时，在此处设置键将影响对帐策略：如果您知道每当其中一个更改时，则可以将每个数组元素设置为每个数组元素的View，Text和Button，以具有相同的密钥，但是如果整个行更改，则它们每个人都会分开变化，然后您应该为它们生成一个唯一的ID。

关于对帐和钥匙的react文档。