Блог

Я решил попробовать Mobx и столкнулся с проблемой отсутствия реакции компонента на изменение поля в репозитории. Я просмотрел похожие темы, но я все еще не понимаю, в чем проблема. Если вы выведете значение свойства на консоль после изменения, вы увидите фактический результат.

index.js

 import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from "mobx-react";
import AppStore from "./AppStore";

import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <Provider AppStore={AppStore}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
 

App.js

 import React, { Component } from "react";
import { inject, observer } from "mobx-react";

@inject('AppStore')
@observer class App extends Component {
  render() {
    const { AppStore } = this.props;
    console.log(AppStore);
    return(
      <div className="App">
        { this.props.AppStore.counter }
        <hr/>
        <button onClick={this.props.AppStore.increment}> </button>
        <button onClick={this.props.AppStore.decrement}>-</button>
      </div>
    )
  }
}

export default App;
 

AppStore.js

 import { observable, action } from "mobx";

class AppStore {
  @observable counter = 0;
  @action increment = () => {
    this.counter = this.counter   1;
    console.log(this.counter);
  }
  @action decrement = () => {
    this.counter = this.counter - 1;
    console.log(this.counter);
  }
}

const store = new AppStore();
export default store;
 

Поскольку mobx@6.0.0 декораторов недостаточно. Вы также должны сделать свой класс наблюдаемым вручную makeObservable .

 class AppStore {
  @observable counter = 0;

  constructor() {
    makeObservable(this);
  }

  @action increment = () => {
    this.counter = this.counter   1;
  }
  @action decrement = () => {
    this.counter = this.counter - 1;
  }
}