反应在组件中添加键[重复]答案

【问题标题】：React Add key in component [duplicate]反应在组件中添加键[重复]
【发布时间】：2019-01-07 02:50:11
【问题描述】：

我收到此错误：

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>
    )
  }
}

我应该在哪里分配关键道具？

【问题讨论】：

你this._getNumbers函数返回什么？
它在投票中返回数字:)
您能否在问题中包含整个组件？
也检查这些其他答案，他们确实对密钥有很好的解释，link

标签： reactjs key

【解决方案1】：

数组中的每个元素都用于渲染should have a key prop。

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

示例

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

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

  return numbers
}

【讨论】：

在这个例子中我应该在哪里添加密钥。请只建议我需要学习如何正确地做到这一点:) const Result = ({ state: { products, displayCategory} }) =>
{products .filter(({ category }) => displayCategory === category || displayCategory === "all" ) .map(({ category, name, StartDate, EndDate, BtcGoal, BtcDonated, desc, img}) => )}
;
@PiotrŻak 请阅读我在答案中链接的文档。用于渲染的数组中的每个元素都应该有一个唯一的键，所以ResultItem 在这种情况下应该有一个键。
我尝试以这种形式制作：.map(({index, category, name, StartDate, EndDate, BtcGoal, BtcDonated, desc, img}) => )} 但还是报错

【解决方案2】：

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

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

【讨论】：