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(),
            }
      );

這樣我們就可以手動修改可以進行變化，頁面就會重新渲染了