Question

更新：显然错误是修复的。我从未推出过解决方案，所以我仍然不确定问题/解决方案是什么。

基本上是发生了什么，我有一个从主应用程序组件传递状态的子组件。我知道它工作正常，因为我看到状态的默认值正确显示。

当子进程挂载时，它会触发一个ajax调用来获取一些数据，然后触发一个动作来相应地更新状态值（其他包使用这个fetch调用，它也能正常工作）。通过查看Redux chrome devtool，我可以看到所有这些都按预期工作。它显示了被触发的操作，并且状态已从默认值更改为它所获取的值。

问题是页面仍然显示默认值而不是新状态值。所以我想知道是否存在调用获取请求/状态更新然后期望组件正确更新的问题。我应该将状态作为低一级的支柱传递并且具有仅专注于显示该值的组件吗？很明显，一切都按预期工作，在设置新状态值时页面不会更新。

这是未更新的子组件的代码（必须为了隐私目的而修改）

import { bindActionCreators, Component, connect, createElement, PropTypes } from 'somePackage';

import { getStatus } from 'somedirectory';

class ChildComponent extends Component {
    constructor(props) {
        super(props);


        this.state = {
            irrelevantState: false,
        };
    }

    componentDidMount() {
        this.fetchMyData();
    }

    fetchMyData() {
        const {
            boundNavActions,
        } = this.props;

        boundNavActions.getStatus();
    }

    render() {
        const {
            **stateImLookingAt**,
            irrelevantString,
            irrelevantString,
        } = this.props;

        return (
            <div>
                <div styleName="irrelevantString">
                    <div styleName="irrelevantString">
                        <a
                            href={ irrelevantString }
                            aria-label={ irrelevantString }
                        >
                            <div
                                spriteSheetType="irrelevantString"
                                name={ irrelevantString }
                            />
                            //Would making this it's own component help?
                            <div styleName="thisDoesntUpdate">
                                { **stateImLookingAt** }
                            </div>
                            //Would making this it's own component help?
                        </a>
                    </div>
                </div>
            </div>
        );
    }
}

ChildComponent.propTypes = {
    boundNavActions: PropTypes.object,
    cartCount: PropTypes.number,
};

const mapDispatchToProps = dispatch => ({
    boundNavActions: bindActionCreators({
        getStatus,
    }, dispatch),
});


export default connect(null, mapDispatchToProps)(ChildComponent);

父母的这种状态并没有很多，但这里有一个片段

import { connect, createElement, PropTypes } from 'somedirectory';
import ChildComponent from 'ChildComponentPackage';

import './app.css';

const AppContainer = (props) => {
    const {
        **stateImLookingAt**,
    } = props;

    return (
        <div styleName="root">
            <ChildComponent
                **stateImLookingAt**={ **stateImLookingAt** }
            />
        </div>
    );
};

const mapStateToProps = state => ({
    **stateImLookingAt**: state.moo.cow.**stateImLookingAt**,
});

AppContainer.propTypes = {
    **stateImLookingAt**: PropTypes.number.isRequired,
};

export default connect(mapStateToProps)(AppContainer);

Redux组件没有更新状态更改？

0 个答案: