React.jsアクションをディスパッチする際のDispatcherとsetState（）の問題

Question

私はreact.jsとフラックスアーキテクチャの新機能です。フラックス・アーキテクチャーの流れを理解するための非常に小さな例を作成しました。しかし、私はアクションとストアを追加した後、いくつかの問題に直面しています。ここに私のコードは次のとおりです。

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内など）は、既存の状態遷移時に更新できません

警告 - 私は現在直面しています210の

エラーはできるだけ早く私は名前フィールドの投げ警告に入力し始めるようです。レンダリング方法は、小道具と州の純粋な機能でなければなりません。 http://localhost:8080/js/bundle.js 行24836

また、他のエラーは発送中に発送できません。

私は長い間立ち往生しています。解決にお役立てください。

Answer 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>