javascript - 遇到两个 child 用相同的 key

我真的是反应和重新开发的新手。我有一个连接到容器的列表组件。我想滚动更新列表，但得到：

Encountered two children with the same key

我的组件：

import React, { Component, PropTypes } from 'react'
import Track from './Track'
import styles from './TrackList.css'

const altImg = require('../images/sc.jpg');

export default class TrackList extends Component  {

  static propTypes = {
    tracks: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired
      }).isRequired).isRequired,
    onTrackListScroll: PropTypes.func.isRequired
  }

 render() {
    const { tracks, onTrackListScroll } = this.props;
    return (
      <div>
      <ul className='tracks'
        onScroll={(e)=>{
          console.log('SCROLL!!',e)
          onTrackListScroll()
        }}>
        {tracks.map(track =>
          <Track
            key={track.id}
            {...track}
            //onClick={() => onTrackClick(track.id)}
            text={track.title}
            imgSrc={!track.artwork_url ? altImg : track.artwork_url}
          />
        )}
      </ul>
      </div>
    )

  }
}

还原器更新状态为：

const toSearchResultOb = (tracks) => {
  return  {
    tracks: tracks
  }
}


case 'UPDATE_SEARCH_RESULT':
      return Object.assign({}, state,
toSearchResultOb(state.tracks.concat(action.tracks)))

用redux更新组件onScroll的正确方法是什么？

最佳答案

之所以出现此错误，是因为组件同级之间的键必须唯一。您的track.id数组中可能有重复的tracks。

这是一个简单的解决方法：

{tracks.map(track, i =>
  <Track
    key={i}
    {...track}
    //onClick={() => onTrackClick(track.id)}
    text={track.title}
    imgSrc={!track.artwork_url ? altImg : track.artwork_url}
  />
)}

如果查看MDN上map()的文档，则会看到以下内容：


  callback函数产生新数组的元素，采用
  三个参数：
  
  
  currentValue当前正在处理的元素
  数组。
  index正在处理的当前元素的索引
  数组。
  


因此，在上面的示例中，i是当前元素的索引。该索引在每次迭代时递增，以确保该map()中的唯一键。现在，您不必担心track.id是什么。

关于javascript - 遇到两个 child 用相同的 key ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42332003/