javascript - redux-form mapStateToProps TypeError : Cannot read property 'values' of undefined even though i can console. 记录状态对象并查看值

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"
    }
  }

客户端.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

目前，当卸载表单时，Redux 存储中的表单状态会被销毁。

这是因为传递给 reduxForm HOC 的配置对象中存在拼写错误。

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