首页 文章

未捕获错误：无法在Connect（Form（））的上下文或道具中找到“store”

提问于
浏览 次
0

我在我的代码中使用了redux，react-router-redux和redux-form . Code有一个Provider，Connected路由器和Mini组件 . Mini组件包括Switch和一些组件，这取决于路由 .

Index.js

...
import { Provider } from 'react-redux'
import { ConnectedRouter, routerMiddleware } from 'react-router-redux'
import createBrowserHistory from 'history/createBrowserHistory'

import Reducers from './reducers'

const history = createBrowserHistory({ basename: 'mini' })
const middlewareRouter = routerMiddleware(history)
const store = createStore(Reducers, applyMiddleware(middlewareRouter))

render(<Provider store={store}>
    <ConnectedRouter history={history}>
        <Mini/>
    </ConnectedRouter>
</Provider>, document.getElementById('root'))

Mini.js

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
...
import NavigationContainer from './containers/navigation'
import CategoryContainer from './containers/category'

class Mini extends Component {
    render () {
        return (<main>
            <Switch>
                <Route path="/navigation" component={NavigationContainer}/>
                <Route path="/category" component={CategoryContainer}/>
                ...
            </Switch>
            <LoadContainer/>
            <div id="form"></div>
        </main>)
    }
}

Switch部分中的所有组件都有一个按钮 . 单击该按钮可以呈现表单 .

...
import FormCreate from './formcreate'

class Topbar extends Component {

    constructor (props) {
        super(props)
        this.handleClickCreate = this.handleClickCreate.bind(this)
    }

    handleClickCreate (e) {
        e.preventDefault()
        render(<FormCreate/>, document.getElementById('form'))
    }
    ...
}

但当我点击按钮时出现错误 Uncaught Error: Could not find "store" in either the context or props of "Connect(Form(FormCreate))"

我该如何解决这个问题？提前致谢！

PS Reducers.js

import { combineReducers } from 'redux'
import { routerReducer as reducerRouter } from 'react-router-redux'
import { reducer as reducerForm } from 'redux-form'

const Reducers = combineReducers({
    ...
    router: reducerRouter,
    form: reducerForm
})

PSS FormCreate.js

import React from 'react'
import { Field, reduxForm } from 'redux-form'

...

const FormCreate = (props) => {

    const { error, handleSubmit, pristine, reset, submitting } = props

    return (
        ...
    )
}

export default reduxForm({

    form: 'create',
    validate

}) (FormCreate)
javascript reactjs react-redux redux-form

1 回答

  • 1

    我认为这里的问题是你试图渲染 FormCreate 在html元素 form 中创建另一个没有访问redux存储的应用程序，导致你看到的错误 .

    我要做的是设置一个reducer来处理我是否应该呈现 FormCreate 然后在你的应用程序中的组件中呈现它，就像在 LoadContainer 中一样 .

    Topbar.js

    class Topbar extends Component {

    constructor (props) {
        super(props)
        this.handleClickCreate = this.handleClickCreate.bind(this)
    }

    handleClickCreate (e) {
        e.preventDefault()
        // dispatch action to reducer to tell store to display FormCreate
    }
    ...
}

    LoadContainer.js

    class LoadContainer extends Component {

    // ... rest of code

    render() {
        // get shouldDisplayForm from redux store
        const { shouldDisplayForm } = this.props;

        return (
            //... rest of component
            { shouldDisplayForm && <FormCreate> }
        );
    } 
}

    或者，如果要在html元素“form”中呈现FormCreate，可以将存储放在一个文件中，以便可以在许多文件中使用它 . 然后使用Provider渲染FormCreate，就像你已经完成了Index.js一样 .

    回复于

相关问题