停留在 "unique key" 警告

Question

我目前正在为待办事项应用改编 Mobx 教程。 link 我想要做的是为每个呈现的列表项添加一个简单的计数器按钮。我想这会很简单，但我一定是犯了一个语法错误，因为我无法让事情正确地啮合。我现在遇到的主要错误是 "Each child in an array or iterator must have a unique 'key' property"。我想我会通过在每个计数器中添加一个 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 组件有键，但你的 View 没有。

React 使用键进行协调，并在组件列表发生变化时找到最小的变化。当您的数组更改时，您在此处设置键的方式将影响协调策略：如果您知道每当其中一个发生变化，整行都发生变化，但是如果它们中的每一个都单独变化，那么你应该为它们中的每一个生成一个唯一的ID。

React docs on reconciliation and keys.

停留在 "unique key" 警告

Stuck on "unique key" warning

react-native

mobx

mobx-react