因此,我正在使用redux-form,并且能够console.log(state)并从review.js的状态对象中看到值,并在state.form.PayForm.values.Dancer中看到它们的预置,但是,如果我尝试在直接以console.log的形式查看页面本身,我收到上述错误。我有一个非常类似的设置,可以完美地在另一个项目上运行,并且以前从未真正遇到过redux-form的问题。

任何帮助或任何方向的见识都会有所帮助。提前感谢您抽出宝贵的时间对此进行研究。让我知道我是否可以提供其他信息。

另外,为了使某些人更轻松,我还对代码进行了截图。

payform.js

import React, { Component } from 'react';
import { Field, reduxForm, reset } from 'redux-form'
import PayFormField from './PayFormField';


class PayForm extends Component{


  render(){
    return(
      <div>
        <label style={{color:'black'}}> Please select lead or follow
        </label>
        <form onSubmit={this.props.handleSubmit(this.props.onFormSubmit)}>
          <Field type="text" component={PayFormField} name="Dancer" />
          <button style={{color:'black'}} type="submit">Review
           Purchase
          </button>
       </form>
     </div>
    )
  }
}


export default reduxForm({
form:'PayForm',
destroyOnUnmount:false
})(PayForm)


payformfield.js

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




  export default ({input,meta})=>{
  return(
    <div>
      <Field component="select" type="select" {...input} >
        <option
        style={{color:'black'}}
        />
          <option value="Lead">Lead</option>
          <option value="Follow">Follow</option>
      </Field>
    </div>
  )
 }


payformholder.js

import React, {Component } from 'react';
import PayForm from './payForm'
import Review from './review'


class payFormHolder extends Component{
  state = { showreview: 'false'}

  renderContent(){
    if(this.state.showreview=='true'){
      return(<Review />)
    }
    else{
      return(
        <PayForm
        onFormSubmit={()=> this.setState({ showreview:'true' })}
      />
      )
    }
  }
  render(){
    return(
      <div>
        {this.renderContent()}
      </div>
    )
  }
}
export default payFormHolder;


review.js

import React, { Component } from 'react'
import {connect} from 'react-redux'

const Review = ({formValues}) => {
    return(
      <div> im the review
        {formValues.values.Dancer}
      </div>
    )
  }
function mapStateToProps(state){
  return{
    formValues: state.form.PayForm
  };
}
export default connect(mapStateToProps)(Review)


以防万一在packacge.json中

  {
    "name": "salsanewyear",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "start": "node ./bin/www & node apiServer.js"
    },
    "devDependencies": {
      "nodemon": "^1.17.5",
      "webpack": "^3.11.0"
    },
    "dependencies": {
      "axios": "^0.18.0",
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.4",
      "babel-preset-env": "^1.7.0",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-1": "^6.24.1",
      "cookie-parser": "~1.4.3",
      "debug": "~2.6.9",
      "express": "~4.16.0",
      "http-errors": "~1.6.2",
      "http-proxy": "^1.17.0",
      "jade": "~1.11.0",
      "lodash": "^4.17.10",
      "morgan": "~1.9.0",
      "paypal-rest-sdk": "^1.8.1",
      "react": "^16.4.1",
      "react-bootstrap": "^0.32.1",
      "react-dom": "^16.4.1",
      "react-redux": "^5.0.7",
      "react-router": "^4.3.1",
      "react-router-dom": "^4.3.1",
      "redux": "^4.0.0",
      "redux-form": "^6.8.0",
      "redux-thunk": "^2.3.0"
    }
  }


client.js

  "use strict"
  import React from 'react';
  import {render} from 'react-dom';
  import {Provider} from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import ReduxThunk from 'redux-thunk'
  import reducers from './reducers/index';

  import LoadinPage from './components/LoadinPage';
  import Footer from './components/footer';




  const store = createStore(reducers, applyMiddleware(ReduxThunk));


  render(
    <Provider store={store}>
    <LoadinPage />
    </Provider>, document.getElementById("app"));


index.js(reducer)

  import {combineReducers} from 'redux';
  import { reducer as form } from 'redux-form';
  export default combineReducers({  form });


payform.js

payformfield.js

payformholder.js
review.js

最佳答案

目前,在卸载表单时,Redux存储中的表单状态已被破坏。

这是因为在传递给reduxForm HOC的配置对象中有一个错字。

您想要在传递给reduxForm HOC的配置对象中将destroyOnUnmount设置为false而不是distroyOnUnmount

07-24 09:44
查看更多