同じキーを持つ2人の子供が遭遇しました

Question

私は本当に反応して、還元開発に新しいです。私は、コンテナに接続されているリストコンポーネントを持っています。私は、スクロールのリストを更新したいが、私は得る：

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？

Answer 1

コンポーネントの兄弟間のキーが一意である必要があるため、このエラーが発生しています。 tracks配列にはtrack.idと重複している可能性があります。要素を生成

callback機能：あなたは​​にmap()のドキュメントを見ている場合は、あなたがこれを参照してくださいよ

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

---

：

はここで簡単に修正です新しい配列の を3つの引数：

• currentValue現在処理中の要素は です。

• index で処理されている現在の要素のインデックスです。

したがって、上記の例では、iは、現在の要素のインデックスです。このインデックスは、反復ごとにインクリメントされ、map()内の一意のキーを保証します。今あなたはtrack.idが何であるか心配する必要はありません。