redux形式的mapStateToProps TypeError：即使我可以console.log状态对象并查看值，也无法读取未定义的属性“值”

Question

So I'm using redux-form and I'm able to console.log(state) and see the values out from the state object in review.js and see that they are preset in state.form.PayForm.values.Dancer , however if I try to reference that in the review page itself as a console.log directly I get the error described above. I have a very similar setup working perfectly on another project and haven't ever really had a problem with redux-form before.

Any help or insight in any direction would help. Thanks ahead of time for taking the time to look at this. Let me know if there is any other information I can supply.

Also for the sake of being easier on some people's eyes I took some screenshots of the code as well.

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) 

just in case here in the 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

Answer 1

At present, the form state is destroyed in the Redux store when the form is unmounted.

This is because there is a typo in the configuration object passed to the reduxForm HOC.

You want to set destroyOnUnmount to be false and not distroyOnUnmount in the configuration object passed to reduxForm HOC.