无法通过react-router获取状态。 （也许不工作react-redux connect（））

Question

const mapStateToProps = (state)=>{
    return {
        userData: state.userData
    }
}

export default connect(mapStateToProps, null)(Init);

像这样连接的组件。 顺便说一句，当我读到this.props时，它没有userData。 this.props如下所示 http://prntscr.com/iypnvj

更新详情

路线档案

import * as React from 'react'
import { Route, IndexRoute } from 'react-router'
import {Layout} from "../components/layout/Layout";
import {Dashboard} from '../components/Dashboard/Dashboard';
import {User} from '../components/User/User';
import {UserEdit} from '../components/User/Edit';
import {Role} from '../components/Role/Role';
import {RoleEdit} from '../components/Role/Edit';
import {Register} from '../components/Register/Register';
import {Init} from '../components/Init/Init';

export default (store) => {
    return (
        <Route>
            <Route component={Layout}>
                <Route path="/" component={Init} />
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/user" component={User} />
                <Route path="/user/create" component={UserEdit} />
                <Route path="/user/edit/:id" component={UserEdit} />            
                <Route path="/role" component={Role} />
                <Route path="/role/create" component={RoleEdit} />
                <Route path="/role/edit/:id" component={RoleEdit} />
            </Route>
            <Route path="/register" component={Register} />
        </Route>
    )
}

布局文件

import * as React from "react";
import NavBar from './NavBar';
import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import { update_user_data } from '../../actions';
export class Layout extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
        };
    }
    render() {
        return (
            <div>
                <NavBar />
                {this.props.children}
            </div>
        );
    }
}

const mapStateToProps = (state)=>{
    return {
        userData: state.userData
    }
}

const mapDispatchToProps = (dispatch)=>{
    return bindActionCreators({
        update_user_data: update_user_data
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Layout);

导航栏文件

import * as React from "react";
import axios from 'axios';
import {
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
} from 'reactstrap';
import {User} from '../../models/user';
import Avatar from 'react-avatar';
import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import { update_user_data } from '../../actions';

export class NavBar extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);
        this.state = {
            isOpen: false,
            // user: new User()
        };
        axios.get('/api/users/me').then(resp=>{
            // this.setState({ user: resp.data[0] });
            this.props.update_user_data(resp.data[0])
        })
    }
    toggle() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }
    logout(){
        axios({
            method: 'post',
            url: 'api/users/logout',
            baseURL: '/'
        })
        .then(resp => {
            window.location.pathname = '/home'
        });
    }
    render() {
        return (
            <div>
                <Navbar light expand="md" style={navbarStyle} fixed="top">
                    <NavbarBrand href="/">xxxxxxx</NavbarBrand>
                    <div style={{display: 'flex'}}>
                        <span className="child_center_div">Hi, {this.props.userData.name}</span>
                        <div style={{margin: '0px 10px 0px'}}>
                            {
                                this.props.userData.avatar?
                                <Avatar round={true} size={40} src={"/api/avatar/"+this.props.userData.avatar} />
                                :
                                <Avatar round={true} size={40} name={this.props.userData.name} />
                            }
                        </div>
                        <NavbarToggler onClick={this.toggle} />
                    </div>
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="ml-auto" navbar>
                            <NavItem>
                                <NavLink  onClick={this.logout.bind(this)}>Logout</NavLink >
                            </NavItem>
                        </Nav>
                    </Collapse>
                </Navbar>
            </div>
        );
    }
}

const navbarStyle={
    boxShadow: '0px 0px 10px 2px rgba(0, 0, 0, 0.25)',
    background: 'white'
}

const mapStateToProps = (state)=>{
    return {
        userData: state.userData
    }
}

const mapDispatchToProps = (dispatch)=>{
    return bindActionCreators({
        update_user_data: update_user_data
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(NavBar);

在导航栏中，我可以获得商店http://prntscr.com/izpcfv 但在布局中，同样的问题http://prntscr.com/izpcne

Answer 1

没有其他细节，我认为它更像是react-redux而不是react-router。您尝试显示状态的方式，从哪里或您的错误可能会有所帮助。

如果您决定检查<Init />组件中的状态，可以这样写：

import store from './store.js';

const Init = (props) => {
  console.log(store.getState());
  return (
    //your JSX
   )
}

另外，请确保您的路线位于<Provider store={store}></Provider>内。只有<Provider></Provider>内部路由呈现的组件才能连接到redux store。

如果您仍然卡住，请随意添加一些细节。