React 在组件中添加 key

17 浏览
0 Comments

React 在组件中添加 key

我遇到了这个错误：

index.js:2178 警告：数组或迭代器中的每个子元素都应该有一个唯一的 "key" 属性。

这是我的对象：

class NumberColumn extends Component {
  _getNumbers() {
    let numbers = []
    let i = 0
    while (i < 10) {
      numbers.push({i})
      i++
    }
    return numbers
  }
  render() {
    const { current } = this.props
    return (
        
          {({y}, i) =>
            

              {this._getNumbers()}  
          }
        
    )
  }
}

我应该在哪里添加 key 属性？

0

2 答案

0 Comments

在React中，每个动态生成的组件都应该有一个唯一的key。在上面的代码中，使用Motion组件动态生成了多个div组件，并给每个div组件添加了一个key属性，但是key属性的值却是通过索引i来生成的。这样做的问题是，当div组件的顺序发生变化时，React会根据key值来判断组件是否发生了变化，但是使用索引i来生成key值会导致问题，因为当顺序变化时，相同的索引会对应不同的组件，从而导致React无法准确判断组件是否发生了变化。

为了解决这个问题，我们需要保证每个动态生成的组件都有一个唯一的key值。一种常见的解决方法是使用每个组件的唯一标识作为key值。例如，可以使用组件的id作为key值：

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

在上面的代码中，通过调用_getComponentId方法来获取每个组件的唯一id，并将id作为key值。这样做就能确保每个组件都有一个唯一的key值，从而解决了React无法准确判断组件变化的问题。

0
0 Comments

在React组件中，每个用于渲染的数组元素都应该有一个唯一的key属性。在上述示例中，可以将每个元素的索引作为key。但是，在示例代码中，应该在哪里添加key属性呢？请告诉我正确的方法，我想学习如何正确添加key属性。

解决方法是在.map()函数中的每个组件中添加一个key属性。这样，每个组件都会有一个唯一的key值，避免出现错误。

修改后的代码如下：

const Result = ({ state: { products, displayCategory} }) => (
  

    {products
      .filter(({ category }) => displayCategory === category || displayCategory === "all")
      .map(({ index, category, name, StartDate, EndDate, BtcGoal, BtcDonated, desc, img}) =>
        
      )}
  

);

这样修改后的代码中，每个组件都有了一个唯一的key值，解决了错误。通过给每个元素添加一个唯一的key属性，React可以更好地跟踪每个元素的状态和更新，提高渲染性能。

0