javascript - redux-form mapStateToProps TypeError:无法读取未定义的属性“值”,即使我可以控制台记录状态对象并查看值
问题描述
所以我正在使用 redux-form 并且我能够console.log(state)
从 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;
评论.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(减速器)
import {combineReducers} from 'redux';
import { reducer as form } from 'redux-form';
export default combineReducers({ form });
解决方案
目前,当表单被卸载时,表单状态在 Redux 存储中被销毁。
这是因为传递给 reduxForm HOC 的配置对象中有错字。
您希望将destroyOnUnmount设置为false
而不是在传递给 reduxForm HOC 的配置对象中。distroyOnUnmount
推荐阅读
- sql-server - 关键列信息不充分或不正确。太多行受更新影响
- html - Django - 我如何将 CSS 应用于无线电模型表单集?
- python - 从数据框 (1-7) 创建唯一列表,使用不同工作表上的数据框 1-7 中的数据创建单独的 excel 文件?
- javascript - 如何将字符串列表附加到反应中的文本区域,redux-form作为列表?
- c - 读取 .bin 文件的某些部分(例如,从 11 日 23 日开始):将十六进制转换为 int、char 字符串。C
- razor - 标准 ASP.Net Core 标签助手不是紫色和粗体
- javascript - 如何使用 jQuery Validate 验证 bootstrap-datetimepicker
- python - Python 3 上的 Werkzeug 引发“< 在 str 和 int 的实例之间不支持”
- c# - RadioButtonFor 始终将 true 传递给 MVC 控制器
- wordpress - WC:如何通过 billing_phone 或 billing_email 搜索客户