React Component, das nicht mit Zustandsänderung aktualisiert wird

Question

Ich habe derzeit einen Reduzierer, der eine tiefe Kopie des Status ausführt und es mit dem aktualisierten Wert zurückgibt.

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

In meiner Render-Funktion der Anzeigekomponente sehe ich die richtigen aktualisierten Werte in this.props.denoms Die render() Funktion Kind baut <DenomInput> Komponenten, und wenn ich meine Haltepunkte setzen sehe ich die richtigen Daten in

weitergegeben werden

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

jedoch, wenn die <DenomInput> Komponenten machen macht es den gleichen Wert wie das, was sie anfänglich

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; 

Welches Stück fehlt mir, um die Ansicht mit React und Redux zu aktualisieren?

Answer 1

Es sieht so aus, als ob Sie Ihren Ausgangszustand mit den Requisiten aus Ihrem Geschäft säen. Sie rendern dann vom Komponentenstatus, aber Sie aktualisieren den Komponentenstatus nie. Sie werden nur einmal gesetzt, da der Konstruktor erst aufgerufen wird, wenn die Komponente gerendert ist. Um das Problem zu beheben, entfernen Sie entweder diesen Komponentenstatus vollständig und verbinden Sie ihn einfach mit dem Redux-Speicher oder aktualisieren Sie den Komponentenstatus onChange. Ich empfehle, den lokalen Status zu entfernen. Ich habe festgestellt, dass die Synchronisierung der beiden Zustände fehleranfällig ist.

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: Ein Beispiel für die Erhöhung des Status. Die Schritte sind:
1. Verbinden Sie eine Ihrer übergeordneten Komponenten, und greifen Sie mit einer mapStateToProps-Funktion auf den entsprechenden Statusabschnitt zu.
2. Übergeben Sie die Requisiten über Ihre verbundene Elternkomponente an DenomInput.
4. Senden Sie in diesem.denomsChange die entsprechende Aktion. Es ist unklar, was das ist, da Sie Ihre Aktion nicht in die Post aufgenommen haben.

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

Kann sein componentWillReceiveProps den Trick tun können. Er aktualisiert den Status der Komponente, sobald neue Daten vom übergeordneten Element empfangen werden, und ruft die Funktion render erneut auf.

Versuchen

class DenomInput extends Component { 
    ... 

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