5

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

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

具体来说，该文件是收到最多修改的文件。我还添加了一个“counterstore.js”文件来保持计数器的存储完好（这似乎失败了）。

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

谢谢，

安德鲁

4

1 回答 1

6

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

做事的问题

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 关于和解和密钥的文档。

于 2017-05-02T19:56:46.580 回答