Question

我在我的代码中使用了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)

Answer 1

我认为这里的问题是你试图渲染FormCreate在html元素form中创建另一个无法访问redux存储的app，导致你看到的错误。< / p>

我要做的是设置一个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一样。

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

1 个答案: