React.js Dispatcher 和 setState() 在调度动作时出现问题答案

【问题标题】：React.js Dispatcher and setState() issue while dispatching an actionReact.js Dispatcher 和 setState() 在调度动作时出现问题
【发布时间】：2016-12-03 16:48:22
【问题描述】：

我对 react.js 和 Flux 架构非常陌生。我刚刚创建了一个非常小的示例来了解通量架构的流程。但是在添加动作和存储后我遇到了一些问题。这是我的代码：

Name.jsx（组件）

var React = require('react');
var ReactDOM = require('react-dom');
var NameActions = require('../actions/NameActions');
var NameStore = require('../stores/NameStore');

var Name = React.createClass({
    getInitialState: function() {
        return {fname: 'Arjita', lname: 'Mitra'};
    },
    _changeIt: function() {

        var fName = this.state.fname;
        var lName = this.state.lname;

        var data = {fName: fName , lName: lName};

        NameActions.setName(data);
    },
    handleChange: function(field,e) {
        var nextState = {}
        nextState[field] = e.target.value;
        this.setState(nextState);
    },

    render: function() {
        return (
            <div>
                <div className = "container">
                    <input type="text" name="firstName" id="idFname" value={this.state.fname}
                    onChange={this.handleChange.bind(this,'fname')}/>
                    <input type="text" name="lastname" id="idLname" value={this.state.lname} onChange={this.handleChange.bind(this, 'lname')}/>
                    <button type="button" name="btnok" onClick={this._changeIt()}>Process</button>
                </div>
            </div>
        );
    }
});

module.exports = Name;

NameActions.js

var ActionsHelper = require('./ActionsHelper');

var NameConstants = require('../constants/NameConstants');

var NameActions = {
    setName: function(value) {
        ActionsHelper.dispatch(NameConstants.SET_NAME, value);
    }
}

module.exports = NameActions;

NameConstants.js

var _BASE = "NAME_CONSTANTS";

function construct(value) {
    return _BASE + "_" + value;
}

module.exports = {
    SET_NAME : construct("SET_NAME")
};

NameStore.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var _ = require('underscore');

var NameConstants = require('../constants/NameConstants');

function setValue(value) {
    console.log(value);
}

var NameStore = _.extend({}, EventEmitter.prototype, {
    addChangeListener : function(callback) {
       this.on('change', callback);
   },
   emitChange : function() {
       this.emit('change');
   },
   removeChangeListener : function(callback) {
       this.removeListener('change', callback);
   }
});

AppDispatcher.register(function(payload) {
    var action = payload.action;
    var data = action.data;

    switch (action.actionType) {
        case NameConstants.SET_NAME :
            setValue(data.value);
            break;

        default :
            return true;
    }

    NameStore.emitChange();
    return true;
});

module.exports = NameStore;

我目前面临的错误是，一旦我开始在名称字段中输入它就会发出警告 -

警告：setState(...)：在现有状态转换期间无法更新（例如在render 内）。渲染方法应该是 props 和 state 的纯函数。 http://localhost:8080/js/bundle.js 24836行

另外一个错误是在调度过程中无法调度。

我被困了很长时间。请帮我解决。

【问题讨论】：

标签： reactjs reactjs-flux

【解决方案1】：

问题出在这一行：

<button type="button" name="btnok" onClick={this._changeIt()}>Process</button>

当您打算传递对它的引用时，您正在渲染中调用 this._changeIt。您可以通过将其更改为以下内容来解决此问题：

<button type="button" name="btnok" onClick={this._changeIt.bind(this)}>Process</button>

【讨论】：