Question

我正在尝试更新计数器whoch observable变量，并观察组件中的值，swhen我单击增量按钮，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 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所指的内容时，你需要保持敏锐的语言。 counter中没有App字段，这就是您在撰写bind(this)时最终尝试引用的内容。

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

变量是mobx类方法中的NaN（可观察 - mobx）

1 个答案: