Antd中List组件的复用

最近在使用List组件的时候，发现组件没有重新渲染，导致状态发送错误。首先，我复现下代码。function Other() { const [data, setData] = useState([6, 7, 8, 3, 4, 5]) function handleData() { setData([6, 7, 8, 9]) } function handleData1() { setData([6,7,8]) } return ( <> <Button onClick={handleData}>12</Button> <Button onClick={handleData1}>12</Button> <List dataSource={data} renderItem={(item)=><ListData list={item}/>}> </List> </> )}function ListData(props) { const [check, setCheck] = useState(false) console.log(check) return <div onClick={() => setCheck(!check)}>{props.list}{check?" true":" false"}</div>}export default Other这里我们使用了List组件，这是一个很常用的组件。但是当我们点击按钮的时候，发现6，7，8三个组件 都没有重新渲染。 我们很容易 就会想到 map key唯一性的问题。 但是如果我们这样改 <List dataSource={data} renderItem={(item,index)=><ListData list={item} key={index}/>}> </List> //or <List dataSource={data} renderItem={(item,index)=><ListData list={item} key={item}/>}> </List>我们会发现 依然没有用 。组件还是没有被重复渲染当我们查看 antd文档的时候，也没有关于该解决方案的 props。所以我们得去查看源码 renderItem = (item: any, index: number) => { const { renderItem, rowKey } = this.props; let key; if (typeof rowKey === ‘function’) { key = rowKey(item); } else if (typeof rowKey === ‘string’) { key = item[rowKey]; } else { key = item.key; } if (!key) { key = list-item-${index}; } this.keys[index] = key; return renderItem(item, index); };so, 看到这段代码，看名字我们也可以猜出 rowKey这个属性，就是我们需要使用的方法了。所以我们将代码修改 <List dataSource={data} rowKey={()=>uuid()} renderItem={(item,index)=><ListData list={item} key={index}/>}> </List>这样就可以解决，组件没有被重新渲染的问题了