Question

我有一个流氓问题，一直在杀我。我在页面加载时调用了一个动作，但由于某种原因它不会更新组件中的状态。在此示例中，我将this.props.count设置为5（TestStore中的默认值）。然后我调用一个动作将它componentDidmount增加到6，但它没有更新组件的状态。它保持在5.然后，如果我点击链接手动更新它，它会从5到7。

我认为它与在调度操作后添加到顶级组件的Flux changeListener有关？

如果我在顶级组件中将changeListener放在componentWillMount而不是componentDidMount中，那么一切正常。但这似乎不是正确的方式？我觉得我错过了什么。

这是一个console.log和组件......

console.log

＆LT;测试人员/＆gt;

import React from 'react';
import TestActions from '../actions/TestActions';

export default class Tester extends React.Component {

  componentDidMount() {
    // this.props.count defaults to 5
    // This brings it to 6
    TestActions.increaseCount();
  }

  render() {
    return (
      <div>
        // Count should display 6, but shows 5
        Count: {this.props.count} 
        <br />
        <a href="#" onClick={this._handleClick}>Increase</a>
      </div>
    );
  } 

  _handleClick(e) {
    e.preventDefault();
    TestActions.increaseCount();
  }

}

＆LT;申请/＆gt;

import React from 'react';
import {RouteHandler} from 'react-router';
import TestStore from '../stores/TestStore';

export default class Application extends React.Component {

  constructor() {
    super();
    this._onChange = this._onChange.bind(this);
    this.state = this.getStateFromStores();
  }

  getStateFromStores() {
    return {
      count: TestStore.getCount()
    };
  }

  componentDidMount() {
    TestStore.addChangeListener(this._onChange);
  }

  _onChange() {
    this.setState(this.getStateFromStores());
  }

  componentWillUnmount() {
    TestStore.removeChangeListener(this._onChange);
  }

  render() {
    return (
      <RouteHandler {...this.state} {...this.props}/>
    );
  }

}

TestStore

var AppDispatcher = require('../dispatchers/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var TestConstants = require('../constants/TestConstants');
var assign = require('object-assign');

var CHANGE_EVENT = 'change';

var _count = 5;

function increaseCount() {
  _count = _count + 1;
}

var TestStore = assign({}, EventEmitter.prototype, {

  getCount: function() {
    return _count;
  },

  emitChange: function() {
    console.log('TestStore.emitChange');
    this.emit(CHANGE_EVENT);
  },

  addChangeListener: function(callback) {
    console.log('TestStore.addChangeListener');
    this.on(CHANGE_EVENT, callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
});

AppDispatcher.register(function(action) {
  var text;

  switch(action.actionType) {
    case TestConstants.INCREASE_COUNT:
      increaseCount();
      TestStore.emitChange();
      break;

    default:
      // no op
  }
});

module.exports = TestStore;

Answer 1

正如您所说，问题出在<Application />：您开始在componentDidMount中收听商店，而您应该在componentWillMount中执行此操作，否则您将开始听取更改组件已安装，因此您将丢失初始增量。

componentWillMount() {
    TestStore.addChangeListener(this._onChange);
  }

无论如何，我建议在顶级组件中执行操作：

在<Application />

componentDidMount() {
    TestActions.increaseCount();
}, 

_handleClick() {
    TestActions.increaseCount();
},

render() {
   return <Tester callback={this._handleClick} count={this.state.count} />
}

在<Tester/>

<a href="#" onClick={this.props.callback}>Increase</a>

Flux动作没有更新状态，我这样做错了吗？

1 个答案: