引用在引用更改之前已更改

Question

我要做的是从另一个对值进行键控的对象中切换出具有匹配(键控(对象的对象属性(字符串(。

例如。。。

const dataRefs = {
'idkey1': { title: "Key1", /*...etc... */ },
'idkey2': { title: "Key2", /*...etc... */ },
'idkey3': { title: "Key3", /*...etc... */ },
// ...etc...
};
const pages = [
{ title: "A Page", data: 'idkey1' },
// ...etc...
];

使用下面的代码，我想切换出pages[n].data和dataRefs中的匹配属性。所以在页面上使用forEach。。。

pages.forEach(page => page.data = dataRefs[page.data])

这样做会导致page.data属性变成undefined，即使它应该匹配。

如果我试图通过将其输出到控制台进行调试，当代码被添加到输出后的时，我会得到一些不寻常的效果，即只看到未定义的。。。。

// This works and does the match exactly as I want it.
pages.forEach(page => console.log("%s: ", page.data, dataRefs[page.data]));
// Output:
//  idkey1: undefined
// This however results in bizzare behaviour and ends up with "undefined".
pages.forEach(page => {
// using console.log to see what's going on...
console.log("%s: ", page.data, dataRefs[page.data]);
page.data = dataRefs[page.data];
});
// Output:
//  [Object object]: undefined
// Trying this alternative, just in case how the DOM inspector 
// might be using references, but still the same issue...
pages.forEach(page => {
console.log(page.data + ": ", dataRefs[page.data]);
page.data = dataRefs[page.data];
});
// Output:
//  [Object object]: undefined

我检查了变量的拼写，一遍又一遍地检查代码，尝试了这么多变体，但似乎无论我做什么，调用page.data = dataRefs[page.data]都不起作用。这会是某种复杂的比赛条件，还是我最近看了太多《黑客帝国》？

这是在组件的render()方法中调用的。

使用Safari 14.1.2(如果有帮助的话(。

Answer 1

问题与Next.JS有关。最好的猜测是Next.JS预渲染了数据，将其存储在某个JSON缓存文件中，并将其传递给组件渲染函数。。。。或者类似的东西。

使用浏览器的检查器，有问题的行page.data = dataRefs[page.data]上的断点只触发过一次，并显示数据在被调用之前已经被函数处理过。这很奇怪。如果删除该行，则会触发断点，并且数据不会被转换。

这让我相信它是某种NextJS生命周期前的东西，可能是SSG过程的一部分。

为了解决这个问题并继续前进，我使用了一个检查if (page.data instanceof Object) return;来阻止它运行两次，这似乎奏效了。这并不理想，但如果没有更好的理由，这就足够了。所以代码最终变成了。。。。

pages.forEach(page => {
// skip the loop if the data has already been converted
//   could have also used a string check, but both should work for now.
if (page.data instanceof Object) return;
// now change the data if it's still a string referrence
page.data = dataRefs[page.data]));
});

同样，我没有最好的答案，但这是解决它的唯一方法，而且由于Javascript通常不会这样做(已经做了很多次这种事情，没有问题(，它将不得不归因于NextJS/SSG(或其他处理器(问题。

我很想了解任何NextJS专家如何做到这一点。