@withWeapp 装饰器中的 data 不能修改不能绑 Object.defineProperty

[forever-z-133]

相关平台

微信小程序

小程序基础库: 2.19.5 使用框架: React

复现步骤

import { Component } from 'react';
import withWeapp from '@tarojs/with-weapp';
import './image-cropper.scss';

@withWeapp({
  data: {
    test: 1,
  },
  attached() {
    this.data.test = 2;
    console.log('test', this.data.test);
    this._observe(this.data, 'test2');
    this.data.test2 = 'a';
    console.log(this.data.test2);
  },
  methods: {
    _observe(obj, key, watchFun) {
      let val = obj[key];
      Object.defineProperty(obj, key, {
        configurable: true,
        enumerable: true,
        set: value => { val = value; console.log('set test2', val); },
        get() { console.log('get test2', val); return val; },
      });
    },
  },
})
class Test extends Component {
  render = () => null;
}
export default Test;

期望结果

渲染上方组件，将打印 "test" 1 和 undefined。
正确的情况应该是打印= "test" 2 和 "set test2" "a" 和 "get test2" "a"。

实际结果

意味着 this.data 已被劫持，无法被修改，也无法绑 Object.defineProperty。这使得一些简单数据处理也存在问题。

环境信息

  Taro CLI 3.3.6 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.16.1 - C:\Program Files (x86)\nodejs\node.EXE
      Yarn: 1.22.10 - C:\Users\yonghzhang\AppData\Roaming\npm\yarn.CMD
      npm: 7.20.3 - C:\Program Files (x86)\nodejs\npm.CMD

---

补充信息

原始场景是用 taro convert 转换了一个 image_cropper 小程序组件，其中有以上语法，造成改动成本很高

[mayaoting]

我也遇到了同样的问题，请问您怎么解决了呢？