Question

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

以下是该应用的github存储库：https://github.com/Darthmaul/UmCount

具体而言，this file是获得最多修改的人。我还添加了一个“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。

React docs on reconciliation and keys

坚持“独特的钥匙”警告

1 个答案: