React-native - 关于唯一键的错误

时间:2017-01-12 23:59:48

标签: react-native

为什么我仍然会遇到需要拥有唯一密钥的错误? This.props.numbers是一个数字数组,它们使用下面的代码生成/显示。但是,我仍然得到错误:数组或迭代器中的每个子节点都应该有一个唯一的“键”支柱。

generateGrid() {
    return this.props.numbers.map((sq) =>
      <TouchableWithoutFeedback>
        <Square key={sq} style={{ height: 30, width: 30 }}>
          <Text>
            {sq}
          </Text>
        </Square>
      </TouchableWithoutFeedback>
    );
  }

1 个答案:

答案 0 :(得分:1)

React希望您提供一个密钥,因为它可以优化确定项目是否已更改并且不必重新呈现所有内容的方式。只需添加一个这样的键:

generateGrid() {
    return this.props.numbers.map((sq, i) =>
      <TouchableWithoutFeedback key={i} > //Here
        <Square key={sq} style={{ height: 30, width: 30 }}>
          <Text>
            {sq}
          </Text>
        </Square>
      </TouchableWithoutFeedback>
    );
  }