0

Flux の altjs 実装を使用して、外部 API からデータを取得しています。API 呼び出しはアクションから正常に機能し、ストアに返され、コンポーネントで onChange() 関数がトリガーされます。ストアの現在の状態から状態を設定しようとしています:

import React, { Component, PropTypes } from 'react';
import AppStore from '../../stores/AppStore';
import AppActions from '../../actions/AppActions';

const title = 'Contact Us';


class ContactPage extends Component {

    constructor(props) {
        super(props);
        this.state = AppStore.getState();
    }

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  componentWillMount() {
    AppActions.getData();
    this.context.onSetTitle(title);
    AppStore.listen(this.onChange)
}

componentWillUnmount() {
    AppStore.unlisten(this.onChange)
}

onChange() {
    this.state = AppStore.getState();
}

  render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <h1>{title}</h1>
          <span>{this.state.data.id}</span>
        </div>
      </div>
    );
}

}

export default ContactPage;

「未定義のプロパティ「状態」を設定できません」というエラーが表示されます

私の店はこのように見えます：

import alt from '../alt';
import AppActions from '../actions/AppActions';

class AppStore {
    constructor() {
        this.bindActions(AppActions);
        this.loading = false;
        this.data = {};
        this.error = null
    }

    onGetDataSuccess(data) {
        this.data = data;
    }
}

export default alt.createStore(AppStore, 'AppStore');

this.state = AppStore.getState() は、コンストラクターでエラーをスローしません。onChange() 関数でスローされているだけです。ここで状態を設定する適切な方法は何ですか?

4

1 に答える 1

1

ES6 クラスを使用する場合、自動バインドがないため、すべてのコールバックを明示的にバインドする必要があります。React.createClassを使用すると、react は自動的にすべてのコールバックをコンポーネントにバインドするため、混乱する可能性があります。そのため、コールバックとして 渡すことができthis.onChangeます。

例えば。

componentWillMount() {
  ...
  AppStore.listen(this.onChange.bind(this));
}
于 2016-02-11T14:21:58.430 に答える