我在react-native应用程序中使用redux-form和react-redux。我在尝试将表单中的值保存到另一个状态时遇到问题。
我有一个显示所有地址的主场景,这里有一个按钮,您可以在其中添加额外的地址。添加按钮会将您引导至输入街道,城市和邮政编码的表单。提交此表单时,您将返回主场景,其中新地址将添加到地址列表中。
我有没有办法使用redux-form从这个表单中保存多个地址,还是应该将所有信息保存到单独的地址状态?
当用户返回主场景时触发了componentWillMount并且运行了addAdress动作,它会从早期的表单中获取道具并将值保存在新的地址状态中。
出于某种原因,即使动作似乎获得街道值并被触发并且地址状态被初始化。所有我得到的回报都是未定义的。我如何定义减速器有什么问题吗?
状态变化
class chooseHouse extends Component {
addAddress(street) {
this.props.addAddress(street)
}
componentWillMount() {
console.log(this.props);
if (this.props.form.hasOwnProperty('address')) {
if (this.props.form.address.hasOwnProperty('values')) {
this.addAddress(this.props.form.address.values.street)
}
}
console.log(this.props);
}
render() {
const data = this.props
const street = (data.form.hasOwnProperty('address') && data.form.address.hasOwnProperty('values')) ?
<Checkbox labelText={this.props.form.address.values.street} /> : null
return (
<ListOfAddresses> (to be fixed later)
)
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch)
}
export default connect((state) => {
return {
form: state.form
} }, mapDispatchToProps)(chooseHouse)
减速器/ address.js
const initialAddress = {
street: "",
city: "",
zipcode: "",
}
export default function reducer(state = initialAddress, action) {
switch (action.type) {
case ADD_ADDRESS:
return Object.assign({}, state, {
address: [
...state.address,
{
street: action.street,
city: '',
zipcode: '',
}
]
})
default:
return state
}
}
动作/ adress.js
import * as types from './types'
export function addAddress(street) {
return { type: types.ADD_ADDRESS, street }
}
控制台日志
action @ 11:24:58.640 ADD_ADDRESS
core.js:112 prev state Object
core.js:116 action Objectstreet: "Asd"type: "ADD_ADDRESS"__proto__: Object
core.js:124 next state Objectform: Object__proto__: Object
的console.log(this.props)
Object
addAddress:()
animation:"fade"
adress: (undefined)
component:Connect(props,context)
form: Object
getAddress:()
index:0
name: "chooseHouse"
navigationState:Object
onBack: onBack()
onNavigate: ()
parent: "flow"
sceneKey:"chooseHouse"
type: "REACT_NATIVE_ROUTER_FLUX_PUSH"
__proto__: Object