redux-form initialValues没有填充

时间:2017-09-17 04:46:22

标签: reactjs redux redux-form

表单似乎没有用相应的模型属性填充字段。状态在触发时已经selectedUser,因此enableReinitialize设置无法解决问题

import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm } from 'redux-form'
import { editUser } from '../actions'

class UserDetailsEdit extends React.Component {  
  renderField(field) {
    const { meta: { touched, error } } = field
    const className = `form-group ${touched && error ? 'has-danger' : ''}`

    return (
      <div className={className}>
        <label>{field.label}</label>
        <input 
          className="form-control"
          type="text"
          {...field.input}
        />
        <div className="text-help">
          {touched ? error : ''}
        </div>
      </div>
    )
  }

  render() {
    const { handleSubmit } = this.props

    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <Field 
          label="First Name"
          name="firstName"
          component={this.renderField}
        />
        <Field
          label="Last Name"
          name="lastName"
          component={this.renderField}
        />

        <div className="btn-toolbar" aria-label="...">
          <button className="btn btn-default">Cancel</button>
          <button type="submit" className="btn btn-primary">Submit</button>
        </div>
      </form>
    )
  }
}

UserDetailsEdit = reduxForm({
  form: 'UserDetailsEdit'
})(UserDetailsEdit)

UserDetailsEdit = connect(
  state => ({
    initialValues: state.selectedUser.data
  }),
  { editUser }
)(UserDetailsEdit)

export default UserDetailsEdit

我的控制台输出:

enter image description here

数据对象:

enter image description here

2 个答案:

答案 0 :(得分:0)

我认为缺少的是您使用点差运算符的级别。

<input className="form-control" type="text" {...field.input} />

应该是......

<input {...field} className="form-control" type="text" />

答案 1 :(得分:0)

傻傻的我。原来是减速机中的一个问题。它本质上从未被吸引过#34;达