mobx class(observable - mobx) 方法中的变量是 NaN

Question

我正在尝试更新可观察变量的计数器，并观察组件中的值，当我单击递增按钮时，this.counter 始终为 NaN，我不明白为什么。组件：

@observer
class App extends Component {
  constructor(props){
    super(props)
  }
  render() {
    const counter = this.props.appState;
    return (
        <div className={styles.description}>
          <button onClick={counter.increment.bind(this)}>+</button>

Mobx class;

class AppState{
    @observable counter=0

   increment(){
       debugger //its null..
        this.counter++;
    }
}
export default AppState

mainjs:

import AppState from './AppState'
...
var appState = new AppState

ReactDOM.render(
  <App appState={appState}/>,
  document.getElementById('root')
);

我该如何解决？

Answer 1

我认为你的问题是，当涉及到 this 所指的内容时，你需要保持尖锐的口吻。 App 中没有 counter 字段，这就是您在编写 bind(this).

时最终尝试参考的内容

尝试<button onClick={() => counter.increment()}>+</button>。

mobx class(observable - mobx) 方法中的变量是 NaN

variable is NaN in method of mobx class(observable - mobx)

reactjs

mobx

mobx-react