React.js Dispatcher und setState() Problem beim Versenden einer Aktion

Question

Ich bin sehr neu in react.js und flux Architektur. Ich habe ein sehr kleines Beispiel erstellt, um den Fluss der Flussarchitektur zu verstehen. Aber ich stehe vor einem Problem, nachdem ich etwas hinzugefügt und gespeichert habe. Hier ist mein Code:

Name.jsx (Komponente)

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; 

Fehler Ich bin derzeit konfrontiert sind, sobald ich seine Wurf Warnung im Namensfeld der Eingabe beginnen -

Warnung: setState (...): nicht während eines bestehenden Zustandsüberganges (wie in render) aktualisieren. Rendermethoden sollten eine reine Funktion von Requisiten und Zustand sein. http://localhost:8080/js/bundle.js Linie 24836

Auch ein weiterer Fehler ist nicht in der Mitte des Versands versandbereit.

Ich bin für eine lange Zeit fest. Bitte helfen Sie mir zu lösen.

Answer 1

Das Problem ist auf dieser Linie:

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

Sie rufen this._changeIt in Ihrem machen, wenn Sie meinen einen Verweis darauf zu übergeben. Sie können dies beheben, indem Sie Folgendes ändern:

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