React中useState值为对象时改变值不渲染

原因：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>