MobX console.log() 有效，但 render() 方法不使用 React.Component 更新

Posted 2023-02-22

【中文标题】MobX console.log() 有效，但 render() 方法不使用 React.Component 更新

【英文标题】：MobX console.log() works but render() method doesn't update using React.Component

【发布时间】：2021-06-04 17:46:55

【问题描述】：

MobX 更新 console.log() 发出的存储，但实际上并没有更新 React.Component 的 render() 方法。在这个例子中我遗漏了什么？

@observer
export class App extends Component 
  constructor(props) 
    super(props);
    this.onClick = this.onClick.bind(this);
  

  @observable data = 
    error: ""
  ;

  onClick() 
    this.data.error = "error has occurred";
    console.log(this.data.error) // testing purposes
  

  render() 
    return (
      <div>
        <div className="red">[ this.data.error ]</div>
        <input type="button" value="Click Me!" onClick=this.onClick />
      </div>
    );
  

CodeSandbox

来源：***的原始代码

【参考方案1】：

在 MobX v6 中，需要在 constructor 方法中调用 makeObservable(this) 才能使类装饰器工作。

请参阅these docs 了解更多信息。

有关工作示例，请参阅 this sandbox。