原因:React中默认浅监听,当State值为对象时,栈中存的是对象的引用(地址),setState改变的是堆中的数据
所以此时 setArr(arr) 后,栈中的地址还是原地址,React浅监听到地址没变,故会认为State并未改变,故没有重渲染页面
思路:将栈中原arr所指向的地址改变即可
const ceshi = [
{ name: '测试数据1', icon: 'jigou', count: 2, color: '#FF9B74' },
{ name: '测试数据2', count: 4, icon: 'lianmeng', color: '#D67AF0' },
{ name: '测试数据3', count: 6, icon: 'wangluo', color: '#25D9F4' },
{ name: '测试数据4', count: 8, icon: 'zilian', color: '#3CC5B1' },
];
const [ceshiTotal, setCeshiTotal] = useState(ceshi);
const arr = [...ceshiTotal];
useEffect(() => {
if (arr != null) {
arr[1].name = '已被修改';
arr[1].count = 102;
setCeshiTotal(arr);
}
}, []);
<div>
<ul>
{arr.map((item) => {
return(
<li key={item.name}>{item.name}</li>
);
}
)}
</ul>
</div>