react-router 渲染导致子组件无法访问构造函数中的 redux 道具

Question

TL,DR: I need to set a default local state value based on a store value in a grandchild's constructor. render vs. component . component lets me have access to the store in child's constructor, render does not. On redux dispatches, render does not re-mount child, component does and wipes the child's local state.

I have a child component in my app that has access to the redux store. The problem is when I use the component={child} in Router -> Route , it's fine. I'm able to use the store in the child 's constructor. However, I need to update the store ( dispatch ) in the same child and using component= is causing the child to un-mount and re-mount, wiping its local state . The issue is here: Redux dispatch causing component local state to reset

So now I'm using render={child} but doing so, it's causing me to not have access to the store (values are null) in my child's constructor. Here is some sample code:

Application.jsx

render() {

        // location, match, search used for hiding elements logic
        const allTabs = ({ location, match, search }) => {

            // Parse the query string and look for the "show" keyword (this is arbitrary)
            const qs = queryString.parse(location.search, { ignoreQueryPrefix: true });

            return (
                <div>
                    { qs.hideHeader === "1" ? null : <Header environment={config.environment} user={this.props.currentUser.fullName} /> }
                    { qs.hideNav === "1" ? null : <NavigationTabs tabList={this.state.tabList} accessPermissions={this.props.currentUser.permission} /> }
                    { qs.hideContent === "1" ? null : <TabContent tabList={this.state.tabList} accessPermissions={this.props.currentUser.permission} /> }
                    { qs.hideFooter === "1" ? null : <Footer /> }
                </div>
            );
        }

        // Place this inside Router and test it. It is not working.... <Route exact path="/t/directLink?showNoHeaderFor=wfPE" component={singleTab} />
        return (
            <Router>
                <div>
                    {/* when `component` is used, can use store in child constructor */}
                    {/* when `render` is used, cannot can use store in child constructor */}
                    {/* when `render` is used, dispatches don't remount component */}
                    <Route path="/" render={allTabs} />
                </div>
            </Router>
        );
    }

TabContent.jsx -> render return

return (
            <div className="tab-content">
                <HashRouter>
                    <Switch>
                        {this.props.tabList.map(tab => {
                            return (
                                {/* i have also tried messing with render/component here, but the problem is probably in Application.jsx */}
                                <Route key={tab.id} path={`/t/${tab.url}`} component={tab.component} />
                            );
                        })}
                        { firstTabUrl !== "" ? <Redirect exact from="/" to={`/t/${firstTabUrl}`} /> : null }
                    </Switch>
                </HashRouter>
            </div>
        );

A Grand-child component, rendered by TabContent.jsx

export class PartnershipStructure extends React.Component {

    constructor(props) {
        super(props);

        // the store
        const { periods, portfolios, utilityValues } = this.props;

        // setting the default value using props
        const calendars = periods.calendars(); // <<-- value is null when `render` is used in Application.jsx

Note: I observe this issue on page refreshes . It seems to be that the grandchild is getting constructed while the store is filling up. If I navigate away from the tab and back, the problem is not observed . It's worth noting that using component= , I don't have this problem. But as stated, component= causes dispatches to re-mount.

Answer 1

Since my aim is to set the grandchild's initial state using redux , I had to "wait" for the redux store to fill up. I cannot do this in the constructor. It seems that in react, the order of events are:

1. components are constructed and mounted
2. fetch operations began async
3. components are rendered
4. redux updates state and updates components with new props

My issue is that component construction were not waiting for redux . To solve this issue, I had to use the lifecycle function componentWillReceiveProps(nextProps) . So that's the answer.