リアクションコンポーネントが状態変更で更新されない

Question

私は現在、ディープコピーの状態を取得し、更新された値を返します。表示コンポーネントの私のレンダリング機能で

function countableItems(state = initialState, action) { 
    switch (action.type) { 
     case types.ADD_TO_SUM: 
      let denomMap = findDenomination(state.denomGroups, action), 
       nestedCopy = Immutable.fromJS(state); 
      return nestedCopy.setIn(['denomGroups', denomMap.group, denomMap.key, denomMap.index, 'sum'], parseFloat(action.value)).toJS(); 
     default: 
      return state; 
    } 
} 

私はrender()機能が子供に<DenomInput>コンポーネントを構築this.props.denomsに正しい更新された値を参照してください、と私は私のブレークポイントを設定したとき、私は

render() { 
    let denomGroups = this.props.denoms.map((denom, i) => { 
     return (
      Object.keys(denom).map((key) => { 
       let denoms = denom[key].map((item, i) => { 
        return <DenomInput denom={item} onDenomChange={this.onDenomChange} key={i}></DenomInput> 
       }); 
       return (<div className="col"><h2>{key}</h2>{denoms}</div>) 
      }) 
     ); 
    }); 

    return (
     <div className="countable-item-wrapper"> 
      <div className="row"> 
       {denomGroups} 
      </div> 
     </div> 
    ); 
} 

に渡される正しいデータを参照してください

しかし<DenomInput>コンポーネントはレンダリング時にそれは彼らが最初に

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 

class DenomInput extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { denom: props.denom } 
     this.handleKeyUp = this.handleKeyUp.bind(this); 
    } 

    handleKeyUp = (e) => { 
     this.props.onDenomChange(e.target.value, this.state.denom.name); 
    } 

    render() { 
     return (
      <div className="input-group denom"> 
       <span className="input-group-addon">{this.state.denom.label}</span> 
       <input 
        type="text" 
        className="form-control" 
        onChange={this.handleKeyUp} 
        value={this.state.denom.sum} /> 

       <span className="input-group-addon">{this.state.denom.count | 0}</span> 
      </div> 
     ); 
    } 
} 

DenomInput.PropTypes = { 
    denom: PropTypes.object.isRequired, 
    onDenomChange: PropTypes.function 
} 

export default DenomInput; 

を設定したものと同じ値をレンダリング

ReactとReduxでビューを更新するには、どの部分が欠けていますか？

Answer 1

店舗の小道具を使って初期状態にしているようです。その後、コンポーネントの状態からレンダリングしますが、コンポーネントの状態は決して更新しません。コンポーネントがレンダリングされるとコンストラクタが呼び出されるだけなので、これらは一度だけ設定されます。修正するには、このコンポーネントの状態を完全に削除し、それをreduxストアに接続するか、またはコンポーネントの状態onChangeを更新します。ローカルの状態を削除することをお勧めします。私は、2つの状態を同期させておくとエラーが起こりやすいことに気付きました。

constructor(props) { 
     super(props); 
     this.state = { denom: props.denom } 
     this.handleKeyUp = this.handleKeyUp.bind(this); 
    } 

    handleKeyUp = (e) => { 
     this.props.onDenomChange(e.target.value, this.state.denom.name); 
     this.setState({ denom: /*new state identitcal to change in redux store*/ }) 
    } 

edit2：状態を上げる例。手順は次のとおりです。
1.親コンポーネントの1つを接続し、適切なスライス状態をmapStateToProps関数で取得します。
2.接続された親コンポーネントを介してPropsをDenomInputに渡します。
4. this.denomsChangeで、適切なアクションをディスパッチします。あなたがあなたの行動を投稿に含めなかったので、これが何であるかははっきりしていません。

class DenomInput extends Component { 
    ... 
    render() { 
     return (
      <div className="input-group denom"> 
       <span className="input-group-addon">{this.props.denom.label}</span> 
       <input 
        type="text" 
        className="form-control" 
        onChange={this.handleKeyUp} 
        value={this.props.denom.sum} /> 

       <span className="input-group-addon">{this.props.denom.count | 0}</span> 
      </div> 
     ); 
    } 
} 


export default DenomInput; 

Answer 2

componentWillReceivePropsは、トリックを行うことができますように。新しいデータが親から受信されるたびにコンポーネントの状態を更新し、render関数を再度呼び出します。

class DenomInput extends Component { 
    ... 

    componentWillReceiveProps(nextProps) { 
     this.setState({ denom: nextProps.denom }) 
    } 
    ... 
}