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视图?
答
它看起来像你从你的商店道具播种你的初始状态。然后您从组件状态进行渲染,但不会更新组件状态。它们只被设置一次,因为构造函数只在组件被渲染时被调用。要解决此问题,请完全删除此组件状态,并将其连接到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;
答
可能是componentWillReceiveProps可以做的。无论何时接收到父数据时,它都会更新组件的状态,并再次调用render
函数。
尝试
class DenomInput extends Component {
...
componentWillReceiveProps(nextProps) {
this.setState({ denom: nextProps.denom })
}
...
}
值看在正确的''而不是''我 –
更新我的答案,以反映您的问题 –
在评论中有哪些价值? state.count.denomGroups? –