React.js Dispatcher和setState（）問題，同時調度一個動作

我對react.js和flux架構非常新穎。我只是創建了一個非常小的例子來理解流量架構的流程。但是我在添加操作和存儲後面臨一些問題。這裏是我的代碼：React.js Dispatcher和setState（）問題，同時調度一個動作

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內）期間，不能更新。渲染方法應該是道具和狀態的純函數。 http://localhost:8080/js/bundle.js Line 24836

另外還有一個錯誤是無法在派送過程中調度。

我被困了很長時間。請幫我解決。

來源

2016-07-29 Arjita Mitra

的問題是在這條線：

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

你在呼喚你的this._changeIt當你的意思是被路過的一個參考吧渲染。您可以通過將其更改爲以下來修復此問題：

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

來源

2016-07-29 05:26:28 Danny

React.js Dispatcher和setState（）問題，同時調度一個動作

回答

相關問題