Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/469.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ReactJS+;mapStateToProps中的Redux道具不会在分派操作时刷新_Javascript_Reactjs_Redux_React Redux - Fatal编程技术网

Javascript ReactJS+;mapStateToProps中的Redux道具不会在分派操作时刷新

Javascript ReactJS+;mapStateToProps中的Redux道具不会在分派操作时刷新,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,分派动作后,道具不变。我的redux容器: class ConnectedAppContent extends React.Component { render() { return ( <div id="content"> <Router> <Switch> <PropsRoute pa

分派动作后,道具不变。我的redux容器:

class ConnectedAppContent extends React.Component {
    render() {
        return (
            <div id="content">
                <Router>
                    <Switch>
                        <PropsRoute path="/login" component={LoginForm} doLogin={this.props.doLogin} />
                        <PrivateRoute path="/scan" redirectTo="/login" component={Scanner} token={this.props.token} />
                        <PrivateRoute path="/result" redirectTo="/login" component={ParsedQRCode} token={this.props.token} />
                    </Switch>
                </Router>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        token: state.token,
        parsedQRCode: state.parsedQRCode
    }
}

const mapDispatchToProps = dispatch => ({
    doLogin: token => dispatch(doLogin(token))
});

export const AppContent = connect(mapStateToProps, mapDispatchToProps)(ConnectedAppContent);
我应该如何更新道具?道具与初始状态绑定,但在
doLogin
之后不会刷新

已更新

我的减速机:

const initialState = {
    token: null
}

export const loginReducer = (state = initialState, action) => {
    switch (action.type) {
        case DO_LOGIN:
            return {...state, token: action.payload}
        default:
            return state;
    }
}
doLogin
操作:

export const doLogin = token => ({
    type: DO_LOGIN,
    payload: token
})

PrivateRoute
组件(我从以下网站获得):


我假设您在绑定到路由的
扫描器
组件上需要prop
令牌
值,在这种情况下,React路由器不会将prop传递给孩子

我不鼓励您将道具传递给routes,而是将所有routes组件制作成容器组件,但如果出于某种原因,您认为这不会成为问题,那么在router中将道具传递给孩子的一种方式是:

<PrivateRoute path="/scan" redirectTo="/login" component={() => <Scanner token={this.props.token}>}/>
}/>
啊,抓到了罪犯:(应该是登录还原者的令牌)


请显示doLogin函数和相应的缩减器。请共享操作的缩减器,如果您正在更新令牌或parsedQRCode@RyanC请参阅更新的question@EdwinVargasupdatedTry
case DO_LOGIN:{console.log('这会出现吗?')}
但在my
PrivateRoute
组件中也未定义令牌。我将在几分钟后将其添加到问题中
privaterout
组件已添加到问题中我将尝试。。。如何邮寄?我以前从来没有这样做过,谢谢你提供了有用的信息,告诉我如何将道具从
路由器
传递给孩子们!谢谢,很高兴能帮助你。
export const PrivateRoute = ({ component, redirectTo, ...rest }) => {
    // rest.token is undefined here, even after dispatching doLogin
    return (
        <Route {...rest} render={routeProps => {
            return !!rest.token ? (
                renderMergedProps(component, routeProps, rest)
            ) : (
                <Redirect to={{
                    pathname: redirectTo,
                    state: { from: routeProps.location }
                }}/>
            );
        }}/>
    );
};
export const PropsRoute = ({ component, ...rest }) => {
    return (
        <Route {...rest} render={routeProps => {
            return renderMergedProps(component, routeProps, rest);
        }}/>
    );
}
<PrivateRoute path="/scan" redirectTo="/login" component={() => <Scanner token={this.props.token}>}/>
const mapStateToProps = state => {
    return {
        token: state.loginReducer.token,