React Native Redux状态未定义

时间:2017-02-27 10:44:36

标签: react-native react-redux jsx redux-form

状态未保存在操作触发器

我在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

0 个答案:

没有答案