React組件不會隨狀態更改而更新

我目前有一個還原器，它執行狀態的深層副本並將其與更新的值一起返回。React組件不會隨狀態更改而更新

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; 
    } 
}

在我呈現顯示組件的功能，我看到正確的更新值this.props.denoms的render()功能建立起來的孩子<DenomInput>部件，當我把我的斷點，我看到

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視圖？

來源

2017-05-25 Jon Harding

它看起來像你從你的商店道具播種你的初始狀態。然後您從組件狀態進行渲染，但不會更新組件狀態。它們只被設置一次，因爲構造函數只在組件被渲染時被調用。要解決此問題，請完全刪除此組件狀態，並將其連接到redux存儲，或者更新組件狀態onChange。我建議刪除當地的州。我發現保持兩個狀態同步是很容易出錯的。

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.連接其中一個父組件，並使用mapStateToProps函數獲取適當的狀態片。
2.將道具通過連接的父組件傳遞給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;

來源

2017-05-25 21:01:03

值看在正確的''而不是''我 –

更新我的答案，以反映您的問題 –

在評論中有哪些價值？ state.count.denomGroups？ –

可能是componentWillReceiveProps可以做的。無論何時接收到父數據時，它都會更新組件的狀態，並再次調用render函數。

嘗試

class DenomInput extends Component { 
    ... 

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

來源

2017-05-25 21:06:43

React組件不會隨狀態更改而更新

回答

相關問題