共计 1330 个字符，预计需要花费 4 分钟才能阅读完成。
最近在使用 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>
这样就可以解决，组件没有被重新渲染的问题了
