1

だから私はReactでMobXを使用しようとしましたが、入力の値が更新されない理由がわかりません。

これは私がこれまでに書いたコードです：

@observer(['recipeStore'])
class App extends Component {
  render() {
    return (
      <input type="text" value={this.props.recipeStore.og} onChange={(e) => {this.props.recipeStore.og = e.target.value}}/>
    );
  }
}

class RecipeStore {
  @observable og;
  @observable style;

  constructor() {
    this.og = 1;
    this.style = {og_low: 1, og_high: 1, fg_low: 1, fg_high: 1, abv_low: 1, abv_high: 1};
  }

  @computed get fg() {
    if (!this.og) return '';
    return (((this.og - 1) * 0.25) + 1).toFixed(3);
  }

  @computed get abv() {
    if (!this.og) return '';
    return ((this.og - this.fg) * 131).toFixed(1);
  }
}

const recipeStore = new RecipeStore();

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

1 に答える 1

2

解決策を見つけました。ストアが更新されているのに、react コンポーネントのライフサイクルがトリガーされていないことがわかったので、他の場所を探す必要がありました。

問題は、@observerデコレータが適切に機能していないことでした。

babel.dev.jsプラグイン'babel-plugin-transform-decorators-legacy'がリストの最初になるように変更する必要がありました。

ここでヒントを見つけました: https://github.com/mobxjs/mobx/issues/105#issuecomment-213356342

于 2016-09-08T23:01:01.700 に答える