我已经安装了redux-form v8.2.0。使用
的react-redux“ redux-form”：“ ^ 8.2.0” “ react-redux”：“ ^ 5.0.1”，
如何设置以允许使用redux表单。
index.js：
import React from 'react'
import { connect } from 'react-redux'
import { startClock, serverRenderClock } from '../store'
import Examples from '../components/examples'
import { reduxForm, Field } from 'redux-form';
class Index extends React.Component {
static getInitialProps({ reduxStore, req }) {
const isServer = !!req
// DISPATCH ACTIONS HERE ONLY WITH `reduxStore.dispatch`
reduxStore.dispatch(serverRenderClock(isServer))
return {}
}
componentDidMount() {
// DISPATCH ACTIONS HERE FROM `mapDispatchToProps`
// TO TICK THE CLOCK
this.timer = setInterval(() => this.props.startClock(), 1000)
}
componentWillUnmount() {
clearInterval(this.timer)
}
render() {
return (
<div>
<Examples />
<form>
<Field
id="email"
name="email"
type="email"
label="Email"
margin="normal"
required
/>
</form>
</div>
)
}
}
const mapDispatchToProps = { startClock }
const formed = reduxForm({ form: 'asdf' })(Index);
const connec = connect(
null,
mapDispatchToProps
)(formed)
export default connec
app.js:
import App, { Container } from 'next/app'
import React from 'react'
import withReduxStore from '../lib/with-redux-store'
import { Provider } from 'react-redux'
class MyApp extends App {
render () {
const { Component, pageProps, reduxStore } = this.props
return (
<Container>
<Provider store={reduxStore}>
<Component {...pageProps} />
</Provider>
</Container>
)
}
}
export default withReduxStore(MyApp)
store.js:
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
const exampleInitialState = {
lastUpdate: 0,
light: false,
count: 0
}
export const actionTypes = {
TICK: 'TICK',
INCREMENT: 'INCREMENT',
DECREMENT: 'DECREMENT',
RESET: 'RESET'
}
// REDUCERS
export const reducer = (state = exampleInitialState, action) => {
switch (action.type) {
case actionTypes.TICK:
return Object.assign({}, state, {
lastUpdate: action.ts,
light: !!action.light
})
case actionTypes.INCREMENT:
return Object.assign({}, state, {
count: state.count + 1
})
case actionTypes.DECREMENT:
return Object.assign({}, state, {
count: state.count - 1
})
case actionTypes.RESET:
return Object.assign({}, state, {
count: exampleInitialState.count
})
default:
return state
}
}
// ACTIONS
export const serverRenderClock = () => {
return { type: actionTypes.TICK, light: false, ts: Date.now() }
}
export const startClock = () => {
return { type: actionTypes.TICK, light: true, ts: Date.now() }
}
export const incrementCount = () => {
return { type: actionTypes.INCREMENT }
}
export const decrementCount = () => {
return { type: actionTypes.DECREMENT }
}
export const resetCount = () => {
return { type: actionTypes.RESET }
}
export function initializeStore (initialState = exampleInitialState) {
return createStore(
reducer,
initialState,
composeWithDevTools(applyMiddleware())
)
}
我在生产中遇到此错误：
Error: Field must be inside a component decorated with reduxForm()
at new Field (/home/rails/nextjs/with-redux-app-with-form/node_modules/redux-form/lib/createField.js:67:15)
at c (/home/rails/nextjs/with-redux-app-with-form/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:323)
at Sa (/home/rails/nextjs/with-redux-app-with-form/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:1)
at a.render (/home/rails/nextjs/with-redux-app-with-form/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:467)
at a.read (/home/rails/nextjs/with-redux-app-with-form/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:58)
at renderToString (/home/rails/nextjs/with-redux-app-with-form/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:53:83)
at render (/home/rails/nextjs/with-redux-app-with-form/node_modules/next-server/dist/server/render.js:86:16)
at renderPage (/home/rails/nextjs/with-redux-app-with-form/node_modules/next-server/dist/server/render.js:211:20)
at Function.value (/home/rails/nextjs/with-redux-app-with-form/.next/server/static/vPPYqCQJpQ2D794t7ErZ2/pages/_document.js:812:41)
at Object.loadGetInitialProps (/home/rails/nextjs/with-redux-app-with-form/node_modules/next-server/dist/lib/utils.js:42:35)
和开发者：
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at invariant (/home/rails/nextjs/with-redux-app-with-form/node_modules/react-dom/cjs/react-dom-server.node.development.js:58:15)
at ReactDOMServerRenderer.render (/home/rails/nextjs/with-redux-app-with-form/node_modules/react-dom/cjs/react-dom-server.node.development.js:3443:7)
at ReactDOMServerRenderer.read (/home/rails/nextjs/with-redux-app-with-form/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
at renderToString (/home/rails/nextjs/with-redux-app-with-form/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)
at render (/home/rails/nextjs/with-redux-app-with-form/node_modules/next-server/dist/server/render.js:86:16)
at renderPage (/home/rails/nextjs/with-redux-app-with-form/node_modules/next-server/dist/server/render.js:211:20)
at Function.value (/home/rails/nextjs/with-redux-app-with-form/.next/server/static/development/pages/_document.js:555:41)
at Object.loadGetInitialProps (/home/rails/nextjs/with-redux-app-with-form/node_modules/next-server/dist/lib/utils.js:42:35)
at Object.renderToHTML (/home/rails/nextjs/with-redux-app-with-form/node_modules/next-server/dist/server/render.js:218:36)
at process._tickCallback (internal/process/next_tick.js:178:7)
在开发人员上获取此内容。
请帮助我。 nextjs应用程序需要其他配置吗？