Reactは小道具交換で再レンダリングしません

Question

私は次のコードを持っています。目標はajax POST操作のためのオブジェクトを準備することです。 実際にはいくつかのオブジェクトのデータを提供するいくつかの<input/>があります。私はそれを簡潔かつ理解できるように単純化しました。

export function setValue(value) { 
    return { 
     type: 'VALUE', 
     data: value 
    } 
}; 

と減速、含まれています：また

var MyComponent = React.createClass({ 
    onChange (value) { 
     var newValue = this.props.value; 
     newValue.field = value; 
     this.props.dispatch(setValue(newValue)); 
    }, 

    render: function() { 
     return (
     <myOtherComponent> 
      <div><input onChange={this.onChange}/></div> 
      <div>this.props.value</div> 
     </myOtherComponent> 
      ) 
    } 
}); 

私がアクションを持っている

case 'NEW_DOCTOR': 
      return { 
       ...state, 
       value: action.data 
      }; 

問題は、私はconsole.logに見ても、私は、this.props.dispatch(setValue(newValue));を行う際に減速があるということです間違いなく解雇された場合、<myOtherComponent>は再レンダリングされません。だから私はthis.props.dispatch(setValue(newValue));の後にthis.setState(this.state)を入れなければなりません、そしてそれはrerendersです。私はこの現象を2回目に見て、私が間違っていることを本当に理解することはできません。すべての手がかりは？

Answer 1

わからない、これはあなたの問題の原因ですが、コードのこの部分の内側：

onChange (value) { 
    var newValue = this.props.value; 
    newValue.field = value; 
    this.props.dispatch(setValue(newValue)); 
}, 

あなたは、直接これを使用すべきでない小道具を、変異されています。 newValue = this.props.value以来

、
声明newValue.field = value
もthis.props.valueを変異させます。