Question

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

// 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都被删除，因此我无法实现我的目标。这是a fiddle，检查控制台，你可以看到有吸气剂/定居者，但是如果你取消注释setState，吸气剂/定居者就会消失。

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

Answer 1

关于为什么

来自官方react documentation：

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

请注意强调浅。这会消灭你可能拥有的任何吸气剂和制定者。请参阅MDN文档了解Object.assign说明。

建议避免看到的内容

我不知道你为什么需要你所在州的吸气剂和制定者。官方＆amp;接受的建议是避免直接改变状态并使用setState方法。

但是，如果由于某种原因或其他原因必须使用它们，我建议查看getDerivedStateFromProps并使用getter创建一个对象来设置它。我的假设是你需要根据一些道具改变来设置状态。

React setState从状态中擦除getter和setter

1 个答案: