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组件不会随状态更改而更新

回答

相关问题