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?
其實我是從分辨率和(我猜)鍵是獨一無二的,從其餘api(soundcloud)獲取數據。有可能我搞砸了一些反應態的東西嗎? –
仍然有渲染它看起來損壞的問題 –
那麼問題還沒有解決呢?你到目前爲止做了什麼? – Chris