工作中遇到的奇怪bug😂不吐不快(7)

前情提要

工作嘛，总有一堆烦心事；每天就是努力扮演一个情绪稳定的成年人。
然后在遇到奇奇怪怪的bug之后，总能一秒破功，让人抓狂，尤其是当bug实在是太智障的时候，让人不禁想问一句：“这尼玛都什么沙雕玩意儿？！”

⚠️在此绝不diss任何码农、攻城狮、程序猿。生活不易，头顶易秃，和气生财。

关于React中的this.state

今天跟老大一起看了一个问题，代码是这样式儿的：↓

// 处理函数中，value是一个字符串
// ...
this.setState({
    val: this.state.val += value
});
// ...

// 钩子函数
componentDidUpdate(prevProps, prevState) {
    console.log("prevState:" + prevState.val);
    console.log("state:" + this.state.val);
}

在钩子函数中，打出来的 prevState 和 this.state 死活是一样的，都是更新之后的值。

我怀疑是因为this指针函数作用域的问题，然后把代码改成了：↓

const val = this.state.val + value;
this.setState({
    val
});

OK解决了。现在打出来的prevState是正常的。
BUT！被我老大diss了。
为了证明我是对的，我把代码写成了这样：↓

const _this = this;
this.setState({
    val: _this.state.val + value
});

结果也是正确的~
但是又被我老大diss了。说我把_this换成this也肯定是对的。像这样：↓

this.setState({
    val: this.state.val + value
});

emmmmm，确实也是对的。

“所以是 += 错了。”我老大如是说。
他是对的，确实是他错了。（因为+=代码是他写的，所以说程序员天生会写bug

错误的原因么，是 this.state.val 被 += 篡改了；
从而导致 prevState 是修改之后的值。

问题找到了，也解决这个最初看起来匪夷所思的bug了。
BUT！
我还是有一个疑惑，为什么 this.state 被允许直接修改呢？

我最初理解 this.state 和 this.setState() 的关系是一个读、一个改；
即使在 this.state 上修改了属性值，也应该不生效才对，否则就会发生许多莫名其妙的事，对，就像今天这个问题一样。
ES6之前可以使用 Object.defineProperty() 对属性的读写进行设置；
ES6也有 get set 可以对属性读写进行设置。

So, why this.state can be change??? (黑人问号

啥都不说了，向黑暗代码恶势力跪下 or2