redux形式的mapStateToProps TypeError：即使我可以console.log狀態對象並查看值，也無法讀取未定義的屬性“值”

Question

所以我正在使用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（減速）

  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

目前，在卸載表單時，Redux存儲中的表單狀態已被破壞。

這是因為在傳遞給reduxForm HOC的配置對象中有一個錯字。

你想設置destroyOnUnmount是false ，而不是 distroyOnUnmount 傳遞給reduxForm HOC的配置對象。