反应组件不会随着状态变化而更新

Question

我目前有一个化简器，可以对状态进行深层复制，并以更新后的值返回它。

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更新视图的哪一部分？

Answer 1

可能由componentWillReceiveProps可以解决。 每当从父级接收到新数据时，它将更新组件的状态，并再次调用render函数。

尝试

class DenomInput extends Component {
    ...

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

Answer 2

看来您正在使用商店中的道具播种初始状态。 然后，您从组件状态进行渲染，但从不更新组件状态。 它们仅设置一次，因为构造器仅在组件呈现后才调用。 要解决此问题，请完全删除该组件状态，然后将其连接到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;