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

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