Question

编辑：实际上，我被困在这里，不能独自解决，简单的代码修复会很有帮助。

我目前正在一个项目上，需要使用redux-store，我尝试将值prop从app.js传递到AppRouter.js，但是当我尝试通过将其登录到控制台或渲染来访问“值” prop时;我在控制台日志和内部渲染值上都得到了未定义的错误：。我该如何克服呢？任何帮助表示赞赏。

这是我的app.js

import React from 'react';
import ReactDOM from 'react-dom';
import {AppRouter} from './routers/AppRouter.js';
import {Provider} from 'react-redux';
import {createStore} from 'redux';


const initialState = {
    login: true,
    value: "10"
  };

const reducer = (state = initialState, action) => {
    if(action.type === "loginTrue") {
      return {
        login: true,
        value: "10"
      };
    }

    else{
        return {
        login: true,
        value: "10"
      };

    }
    return state;
};



const store = createStore(reducer,initialState);

store.dispatch({type: "loginTrue"});


const jsx = (
    <Provider store={store}>
    <AppRouter/>
    </Provider>
);

ReactDOM.render(jsx,document.getElementById('app'));

这是我的AppRouter

import {Router, Route, Switch} from 'react-router-dom';
import React from 'react';
import {DashBoard} from '../components/DashBoard.js';
import {Login} from '../components/Login.js';
import {SignUp} from '../components/SignUp.js';
import {NotFoundPage} from '../components/NotFoundPage.js';
import {Header} from '../components/Header.js';
import {LoginSuccess} from '../components/LoginSuccess';
import {Failed} from '../components/Failed';
import createHistory from 'history/createBrowserHistory';
import {connect} from 'react-redux';

export const history = createHistory();

export class AppRouter extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        console.log("val "+ this.props.value);  //output val undefined
      return(

    <Router history={history}>
    <div>
        <Header />
        value: {this.props.value}                //outputs value : 
    <Switch>
        <Route path="/" component={DashBoard} exact={true}/>
        <Route path="/login" component = {Login} />
        <Route path="/signup" component = {SignUp}/>
        <Route path="/loginSuccess" component = {LoginSuccess}/>
        <Route path="/failed" component = {Failed}/>
        <Route component = {NotFoundPage} />

    </Switch>
     </div>
    </Router>
    )
  }

};

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

export default connect(mapStateToProps)(AppRouter);

Answer 1

您没有将价值传递给AppRouter，这就是为什么您没有在AppRouter组件中获得价值的原因。您需要做的是将值作为PRP传递给AppRouter，并进行如下所示的值调整

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import {AppRouter} from './routers/AppRouter.js';
import {Provider} from 'react-redux';
import {createStore} from 'redux';


const initialState = {
    login: true,
    value: "10"
  };

const reducer = (state = initialState, action) => {
    if(action.type === "loginTrue") {
      return {
        login: true,
        value: "10"
      };
    }

    else{
        login: true
    }
    return state;
};



const store = createStore(reducer,initialState);
console.log(store.getState());

const jsx = (
    <Provider store={store}>
    <AppRouter value={initialState.value}/>
    </Provider>
);

ReactDOM.render(jsx,document.getElementById('app'));

现在在AppRouter.js中，您将获得this.props.value

Answer 2

在AppRouter.js中，由于您没有mapDispatchToProps变量，请尝试提供“连接”方法null的第二个参数

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

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

Answer 3

为什么无法正确获取redux状态的问题是因为连接的AppRouter是默认导出，但是在App.js中，您使用的是命名导入：

import {AppRouter} from './routers/AppRouter.js';

这是未连接的组件，请通过以下方式修复导入：

import AppRouter from './routers/AppRouter.js';

请注意导出和导入，此链接可能会有所帮助：https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export欢呼声

Redux无法从商店获取状态

3 个答案: