{charts.map( (ch, i) => {
const tempApiDetails = {...apiDetails};
tempApiDetails.apiOptions.params = generateParams(ch.dashBoardType, ch.reportType);
//above line is to generate params for API call
<SimpleTable apiOptions={tempApiDetails} />
})}
在上面的代碼charts中有 3 個專案。但最后所有三個都具有相同params的charts變數中的最后一個圖表。有人可以向我解釋一下它的基本原理是什么嗎？
uj5u.com熱心網友回復：
這與范圍無關。
tempApiDetails是 的淺拷貝apiDetails。
這意味著tempApiDetails.apiOptions每次回圈時的值都是相同的。
由于它是一個物件，并且物件是通過參考存盤的，因此每次分配給apiOptions.params您時都會覆寫params同一個物件的。
您需要克隆apiOptions.
const tempApiDetails = {
...apiDetails,
apiOptions: {...apiDetails.apiOptions}
};
你可以一次性完成整個事情：
const tempApiDetails = {
...apiDetails,
apiOptions: {
...apiDetails.apiOptions,
params: generateParams(ch.dashBoardType, ch.reportType)
}
};
對于復雜的資料結構，您可能需要查看immer 庫，它將為您處理所有的克隆。
const tempApiDetails = produce(apiDetails, draft => {
draft.apiOptions.params = generateParams(ch.dashBoardType, ch.reportType);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/381386.html
標籤：javascript 反应