React 数组变化不引起视图更新？

const [receiveData, setReceiveData] = React.useState([
      {
         key:1,
         paymentId:'',
         paymentName:'',
         paymentAccount:'',
         paymentInfo:'',
         paymentAmount:'',
      }，{

         key:2,
         paymentId:'',
         paymentName:'',
         paymentAccount:'',
         paymentInfo:'',
         paymentAmount:'',
      }，

]);

根据以上代码我们想要修改数组中某条数据然后交给react去渲染,

const newReceive = receiveList.map(item =>
    item.key === key ?
         {
             ...item,
             paymentId: item.paymentId ?? '',
             paymentName: item.paymentName ?? '',
             paymentAccount: item.paymentAccount ?? '',
             paymentInfo: item.paymentInfo ?? ''
          } : {
             ...item,
          }
     );

我们会发现页面没有变化，但是可以在页面中打印出数据已经变化，页面没有重新渲染；

导致这个问题的原因主要是，我们在变更数据的时候key没有变化，我们把数据传递给组件，组件恰好用的就是这个key设置react的唯一key由于key没有变化，所有页面没有更新

需要修改写法，建议每次修改数据都要把key进行变化

const keyStr = () => Math.random().toString(36).substr(2);

 const receiveList = [...receiveData];
      const newReceive = receiveList.map(item =>
         item.key === key ?
            {
               ...item,
               key: keyStr(),
               paymentId: item.paymentId ?? '',
               paymentName: item.paymentName?? '',
               paymentAccount: item.paymentAccount?? '',
               paymentInfo: item.paymentInfo?? ''
            } : {
               ...item,
               key: keyStr(),
            }
      );

这样我们就可以手动修改可以进行变化，页面就会重新渲染了