我真的是 React 和 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>
)
}
}
reducer 更新状态是:
const toSearchResultOb = (tracks) => {
return {
tracks: tracks
}
}
case 'UPDATE_SEARCH_RESULT':
return Object.assign({}, state,
toSearchResultOb(state.tracks.concat(action.tracks)))
用 redux 更新组件 onScroll 的正确方法是什么?
最佳答案
您收到此错误是因为组件兄弟之间的键必须是唯一的。您的 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}
/>
)}
如果您在 MDN 上查看 map()
的文档,你会看到这个:
callback
Function that produces an element of the new Array, taking three arguments:
currentValue
The current element being processed in the array.
index
The index of the current element being processed in the array.
所以在上面的例子中,i
就是当前元素的索引。该索引在每次迭代时递增,这保证了 map()
中的唯一键。现在您不必担心 track.id
是什么。
关于javascript - 遇到两个拿着同把 key 的 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42332003/