Javascript 响应组件未更新状态更改

我目前有一个reducer，它对state进行深度复制，并返回更新后的值

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（）

函数构建子

组件，当我设置断点时，我看到正确的数据被传入

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

render（）{
让denomGroups=this.props.denoms.map（（denom，i）=>{
返回(
Object.keys（denom）.map（（key）=>{
设denoms=denom[key].map（（项，i）=>{
返回
});
返回（{key}{denoms}）
})
);
});
返回(
{denomGroups}
);
}

但是，当

组件渲染时，它渲染的值与最初设置的值相同

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;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
类DenomInput扩展了组件{
建造师（道具）{
超级（道具）；
this.state={denom:props.denom}
this.handleKeyUp=this.handleKeyUp.bind（this）；
}
handleKeyUp=（e）=>{
this.props.onDenomChange（e.target.value、this.state.denom.name）；
}
render（）{
返回(
{this.state.denom.label}
{this.state.denom.count | 0}
);
}
}
DenomInput.PropTypes={
denom:PropTypes.object.isRequired，
onDenomChange:PropTypes.function
}
输出默认值；

---

使用React和Redux更新视图时，我缺少了什么内容？

看起来您正在使用商店中的道具播种初始状态。然后从组件状态进行渲染，但从不更新组件状态。它们只被设置一次，因为构造函数只在呈现组件时被调用。要修复此问题，请完全删除此组件状态并将其连接到redux存储，或者在更改时更新组件状态。我建议删除本地州。我发现保持这两种状态的同步很容易出错

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.连接一个父组件，并使用MapStateTops函数获取相应的状态片
2.通过连接的父组件将道具传递给DenomInput。
4.在this.denomchange中，分派适当的操作。不清楚这是什么，因为您没有在帖子中包含您的行为。

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;

类DenomInput扩展组件{
...
render（）{
返回(
{this.props.denom.label}
{this.props.denom.count | 0}
);
}
}
输出默认值；

可能是你能做到的。每当从父级接收到新数据时，它将更新组件的状态，并再次调用

render

函数

试一试

---

这些值在

中看起来是正确的，但不是

注释中的值是什么？state.count.denomGroups？我认为你应该先试试@PriyeshKumar的答案，假设你正确地分配了更新道具的动作。但总的来说，连接是一个不错的选择。我不认为你在Redux中使用了这些功能，通常你不必这样做。问题是您同时拥有组件状态和redux状态，并且您正在使用redux状态

props.denom

，来填充组件状态：

this.state={denom:props.denom}

，然后在存储中使用组件状态。由于您从不更新组件状态，因此您永远看不到组件中的更改。我将在我的评论中添加一个编辑，向您展示我认为更一致/更不容易出错的选项。componentWillReceiveProps已被弃用。相关帖子：

class DenomInput extends Component {
    ...

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