2017-02-19 64 views
1

我真的很新,反應和redux的發展。我有一個連接到容器的列表組件。我要更新滾動列表,但我得到:遇到兩個同一個鑰匙的孩子

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

什麼是更新組件正確的方法onScroll with redux?

回答

3

您會收到此錯誤,因爲組件兄弟之間的鍵需要是唯一的。您的tracks陣列中可能有重複track.id

這裏有一個簡單的辦法:

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

如果你看一下的map()上​​的文件,你會看到這一點:

callback函數產生一個元素新陣列,取 三個參數:

  • currentValue正在處理的當前元素爲 的數組。

  • index該數組正在處理當前元素的索引 。

因此,在上面的例子中,i是當前元素的索引。該索引在每次迭代時遞增,以保證該map()內的唯一密鑰。現在你不必擔心track.id是什麼。

+0

其實我是從分辨率和(我猜)鍵是獨一無二的,從其餘api(soundcloud)獲取數據。有可能我搞砸了一些反應態的東西嗎? –

+0

仍然有渲染它看起來損壞的問題 –

+0

那麼問題還沒有解決呢?你到目前爲止做了什麼? – Chris

相關問題