Question

我收到此错误：

index.js：2178警告：数组或迭代器中的每个子代都应具有唯一的“键”属性。

这是我的对象

class NumberColumn extends Component {
  _getNumbers() {
    let numbers = []
    let i = 0

    while (i < 10) {
      numbers.push(<div>{i}</div>)
      i++
    }

    return numbers
  }

  render() {
    const { current } = this.props

    return (
      <div className="vote__column">
        <Motion
          style={{y: spring(current * 10)}}
        >
          {({y}, i) =>
            <div
              key ={i}
              style={{
                transform: `translateY(${-y}%)`
              }}
            >
              {this._getNumbers()}  
            </div>
          }
        </Motion>
      </div>
    )
  }
}

我应该在哪里分配钥匙道具？

Answer 1

数组中用于呈现should have a key prop的每个元素。

您可以将每个元素的索引用作从key返回的数组中的_getNumbers。

示例

_getNumbers() {
  let numbers = []
  let i = 0

  while (i < 10) {
    numbers.push(<div key={i}>{i}</div>)
    i++
  }

  return numbers
}

Answer 2

每个div应该有自己独特的key：

<Motion
  style={{y: spring(current * 10)}}
>
  {({y}, i) =>
    <div
      key={i}
      style={{
        transform: `translateY(${-y}%)`
      }}
    >
      {this._getNumbers()}
    </div>
  }
</Motion>

React添加组件中的键

2 个答案: