javascript - javascript映射中变量的范围

Question

{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 中的最后一张图表制作的多变的。有人可以解释一下它的基本原理是什么吗？

Answer 1

这与范围无关。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 library它将为您处理所有克隆。

const tempApiDetails = produce(apiDetails, draft => {
    draft.apiOptions.params = generateParams(ch.dashBoardType, ch.reportType);
});