React setState 从状态中擦除 getter 和 setter

Question

我正在尝试嵌入一个函数，该函数使对象中的某些属性依赖于其他一些道具，或者computed。这个想法很大程度上受到 vue.js 中computed的影响。该函数如下所示：

// given `destPairs` is like `{destProp: computer}`,
// this function sets `host[srcProp]` to `value`, and re-compute `host[destProp]` using `computer` when `host[srcProp]` changes
function defineComputed(host, srcProp, value, destPairs) {
Object.defineProperty(host, srcProp, {
set(newVal) {
this.__my_store = this.__my_store || {};
this.__my_store[srcProp] = newVal;
for(const destProp in destPairs) {
const computer = destPairs[destProp];
this[destProp] = computer(newVal);
}
},
get() {
return this.__my_store[srcProp];
}
});
host[srcProp] = value;
}

该函数似乎工作正常，除非我使用setState时，此函数在状态中定义的所有 getter/settter 都被清除，所以我无法实现我的目标。这是一个小提琴，检查控制台，你可以看到有getter/settters，但是如果你取消注释setState，getters/settters就消失了。

setState究竟如何工作可能会回答这个问题，所以我试图阅读它，但步入setState我只看到类似this.updater.enqueueSetState的东西，而不是真正改变状态的代码，所以我无法找到反应如何改变状态。

Answer 1

关于为什么

来自官方反应文档：

您可以选择将对象作为第一个参数传递给 setState() 而不是函数：setState(stateChange[, callback])这将执行状态更改为新状态的浅表合并

请注意强调浅层。这会消除您可能拥有的任何吸气者和二传手。请参阅 MDN 文档以获取 Object.assign 说明。

避免您所看到的内容的建议

我不知道为什么你的州需要吸气剂和二传手。官方和公认的建议是避免直接改变状态并使用setState方法。

但是，如果您出于某种原因必须拥有它们， 我建议查看getDerivedStateFromProps并创建一个带有getters的对象来设置它。我在这里的假设是，您需要根据某些道具更改来设置状态。