我正在尝试实现一个函数，使对象中的某些属性依赖于其他一些属性，或者，computed。这个想法很大程度上受到computed在 vue.js 中 https://v2.vuejs.org/v2/api/#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/setter 都被清除，因此我无法实现我的目标。这是a fiddle https://jsfiddle.net/JJPandari/k8oxwqek/，检查控制台，你可以看到有 getters/setters，但是如果你取消注释setState，吸气剂/吸气剂消失了。
How setState完全有效可能会回答这个问题，所以我尝试阅读它，但是步入setState我只看到类似的东西this.updater.enqueueSetState但不是真正改变状态的代码，所以我无法找到反应如何改变状态。
关于为什么
来自官方反应文档 https://reactjs.org/docs/react-component.html#setstate:
您可以选择将对象作为第一个参数传递给 setState() 而不是函数：setState(stateChange[, callback])这执行一个浅合并state的改变变成新的state
请注意强调shallow。这会消除您可能拥有的任何 getter 和 setter。请参阅 MDN 文档对象.分配 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign描述。
避免您所看到的情况的建议
我不知道为什么你的州需要 getter 和 setter。官方和公认的建议是避免直接改变状态并使用setState方法。
但是，如果您出于某种原因必须拥有它们，
我建议看看从Props获取DerivedState https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops并使用 getter 创建一个对象来设置它。我的假设是您需要根据某些道具的更改来设置状态。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
