Question

我遇到了react-redux提供商的问题：我将路由器从index.js移到了routing.js文件中。我使用Provider来提供路由组件对商店的了解，但是在执行到达render方法之前我收到了一个奇怪的警告：

Warning: Failed context type: The context `store.isRequired` is marked as required in `Routing`, but its value is `undefined`.

即使我摆脱了.isRequired中的Routing.contextTypes，也会发生这种情况。此外，如果我在render函数的开头放置一个调试器语句，似乎this.context未定义，我的应用程序就像一个魅力。我想知道我是否做错了什么，或者它是否可能是react-redux提供商或其他什么的错误。

这是我的代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { setLanguage } from 'redux-i18n';
import I18n from 'redux-i18n/immutable';

import configureStore from './store/configure_store';
import { Routing } from './routing';
import translations from './translations';

import '../scss/index.scss';

const store = configureStore();

store.dispatch(setLanguage(navigator.language));

ReactDOM.render(
    <Provider store={ store }>
        <I18n translations={ translations }>
            <Routing />
        </I18n>
    </Provider>,
    document.getElementById("root")
);

routing.js（为了阅读而简化）

import React from 'react';
import { Route, IndexRedirect, IndexRoute, Router, browserHistory } from 'react-router';
import AppContainer from './components/App/App';
import Base from './components/Root/Base';
import BaseInProject from './components/App/BaseInProject';
import { ProjectListContainer } from './components/App/Projects/ProjectsList';

export class Routing extends React.Component {
    render() {
        const { store } = this.context;

        const beforeAppRouteEnter = (nextState, replace, callback) => {
            // This function needs to store.dispatch some stuff
        };

        // Some other router functions

        const routes = (
            <Route path='/' component={ Base }>

                <Route component={ AppContainer } onEnter={ beforeAppRouteEnter }>
                    <IndexRoute component={ ProjectListContainer } />

                         // Some other routes

                        <IndexRedirect to='media' />
                    </Route>
                </Route>
            </Route>
        );

        return (
            <Router history={ browserHistory }>{ routes }</Router>
        );
    }
}
Routing.contextTypes = {
    store: React.PropTypes.shape(React.PropTypes.any)
};

谢谢！

警告：上下文类型失败：上下文`store.isRequired`在`Routing`中标记为必需，但其值为`undefined`

0 个答案: