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（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的配置对象中有一个错字。

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

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

1 个答案: