javascript - Redux 表单 - 初始值未加载到表单中

Question

新手。

我有一个相当长的表格，用作更改客户详细信息的编辑表格。表单加载但不加载任何值。建议对字段(例如“foo”和“bar”)的一些值进行硬编码，这样做我会在文本字段中获取这些字符串。

这是我在表单末尾的代码，用于对有效的初始值进行硬编码:

    let ClientForm = reduxForm({
    form: CLIENT_FORM_NAME,

  })(Client)

        ClientForm = connect(
          state => ({
             initialValues: { account: 'foo', bsb: 'bar', }
          }),
          { reducer } // bind client loading action creator
        )(ClientForm)

  export default ClientForm

但是，如果我使用以下代码，即使“state.editClient”具有值，也不会发生任何事情。

      let ClientForm = reduxForm({
    form: CLIENT_FORM_NAME,

  })(Client)

        ClientForm = connect(
          state => ({
            initialValues: state.editClient // pull initial values from client reducer
          }),
          { reducer } // bind client loading action creator
        )(ClientForm)

  export default ClientForm

现在我使用以下导入导入我的 reducer :

     import reducer from '../edit/reducer'

没有错误 - 它找到了这个。

这是 reducer :

  import { fetch, addTask } from 'domain-task'
  import { getJwt } from '../../../auth/jwt'
  import { handleErrors } from '../../../utils/http'
  import {
    REQUEST_CLIENT_TO_EDIT,
    RECEIVE_CLIENT_TO_EDIT,
    ERROR_CLIENT_EDIT,
  } from './actions'

  const initialState = {
    isLoading: false,
    isEditMode: null,
    error: null,
    id: null,
    clientNo: null,
    company: false,
    companyName: null,
    abn: null,
    isWarrantyCompany: false,
    requiresPartsPayment: false,
    companyEmail: null,
    clientFirstName: null,
    clientLastName: null,
    mobilePhone: null,
    phone: null,
    email: null,
    notes: null,
    bankName: null,
    bsb: null,
    account: null,
    activity: false,
    active: false,
    dateCreated: null,
    userName: null,
  }

  export default (state = initialState, action) => {
    switch (action.type) {
      case REQUEST_CLIENT_TO_EDIT:
        return {
          ...state,
          id: action.payload,
          isLoading: true,
          error: null,
        }

      case RECEIVE_CLIENT_TO_EDIT:
        return {
          ...state,
          ...action.payload,
          isLoading: false,
          error: null,
        }

      case ERROR_CLIENT_EDIT:
        return {
          ...state,
          isLoading: false,
          error: action.payload,
        }

      default:
        return state
    }
  }

这由操作调用，结果更新状态。

这是chrome的redux工具中editClient的图片...

为什么页面不会加载“editClient”？我错过或误解了什么。

顺便说一句，这是给客户的完整表格(我认为最好在表格中包含完整的上下文):

      import React, { PropTypes } from 'react'
  import { Field, reduxForm, FormSection } from 'redux-form'
  import { connect } from 'react-redux'
  import { Col, Row } from 'react-bootstrap'
  import { Button, Glyphicon, Panel } from 'react-bootstrap'
  import Moment from 'moment'
  import Address from '../../address/addressContainer'
  import FormField from '../../formComponents/formField'
  import CheckboxField from '../../formComponents/checkboxField'
  import TextField from '../../formComponents/textField'
  import StaticText from '../../formComponents/staticText'
  import TextAreaField from '../../formComponents/textAreaField'
  import DateField from '../../formComponents/datefield'

  import reducer from '../edit/reducer'

  export const CLIENT_FORM_NAME = 'Client'

  const required = value => (value ? undefined : 'Required')
  const maxLength = max => value =>
    value && value.length > max ? `Must be ${max} characters or less` : undefined
  const number = value =>
    value && isNaN(Number(value)) ? 'Must be a number' : undefined
  const minValue = min => value =>
    value && value < min ? `Must be at least ${min}` : undefined
  const email = value =>
    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
      ? 'Invalid email address'
      : undefined
  const tooOld = value =>
    value && value > 65 ? 'You might be too old for this' : undefined
  const aol = value =>
    value && /.+@aol\.com/.test(value)
      ? 'Really? You still use AOL for your email?'
      : undefined

  const normalizeMobilePhone = value => {
    if (!value) {
      return value
    }

    const onlyNums = value.replace(/[^\d]/g, '')
    if (onlyNums.length <= 4) {
      return onlyNums
    }
    if (onlyNums.length <= 8) {
      return `${onlyNums.slice(0, 4)} ${onlyNums.slice(4)}`
    }
    return `${onlyNums.slice(0, 4)} ${onlyNums.slice(4, 7)} ${onlyNums.slice(7, 10)}`
  }

  export const Client = (props) => {
    const { 
      handleSubmit,
      companyValue,
      isWarrantyCompanyValue,
      isEditMode } = props

    const { reset } = props

    return (
      <Row>
        <Col md={12}>
          <h2><Glyphicon glyph="edit" /> {isEditMode ? 'Edit' : 'New'} Client</h2>
          <hr />
          <form onSubmit={handleSubmit} className="form-horizontal">
            {isEditMode && (
              <Panel header={<h3>Client - Basic Details</h3>}>
                <Row>
                  <Field component={StaticText}
                    name="clientNo"
                    id="clientNo"
                    label="Client No."
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />

                  <Field component={StaticText}
                    name="dateCreated"
                    id="dateCreated"
                    label="Date Created."
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />

                  <Field component={StaticText}
                    name="userName"
                    id="userName"
                    label="Created By."
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />
                </Row>

                <Row>
                  <Field
                    component={props => {
                      return (
                        <StaticText {...props}>
                          <p
                            className="form-control-static"
                          >
                            <Glyphicon glyph={props.input.value ? 'ok' : 'remove'} />
                            {' '}{props.input.value ? 'Has jobs attached' : 'No jobs attached'}
                          </p>
                        </StaticText>
                      )
                    }}
                    name="activity"
                    id="activity"
                    label="Activity"
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />

                  <Field component={CheckboxField}
                    name="active"
                    id="active"
                    label="De-Activate"
                    checkboxLabel="De activate this client"
                    fieldCols={4}
                    labelCols={4}
                    controlCols={8}
                  />
                </Row>
              </Panel>
            )}

            <Panel header={<h3>Client - CompanyDetails</h3>}>

              <Row>
                <Field component={CheckboxField}
                  id="company"
                  name="company"
                  label="Company?"
                  checkboxLabel="Client represents a company"
                  fieldCols={6}
                  labelCols={3}
                  controlCols={9}
                />
              </Row>
              {companyValue && (
                <div>
                  <Row>
                    <Field component={TextField}
                      name="companyName"
                      id="companyName"
                      type="text"
                      label="Company Name"
                      placeholder="Enter company name..."
                      fieldCols={6}
                      labelCols={3}
                      controlCols={9}
                    />

                    <Field component={TextField}
                      name="abn"
                      id="abn"
                      type="text"
                      label="ABN."
                      fieldCols={6}
                      labelCols={3}
                      controlCols={5}
                    />
                  </Row>
                  <Row>
                    <Field component={CheckboxField}
                      id="isWarrantyCompany"
                      name="isWarrantyCompany"
                      label="Warranty Company?"
                      checkboxLabel="Client represents a warranty company"
                      fieldCols={6}
                      labelCols={3}
                      controlCols={9}
                    />
                    {isWarrantyCompanyValue && (
                      <Field component={CheckboxField}
                        id="requiresPartsPayment"
                        name="requiresPartsPayment"
                        label="Requires Parts Payment?"
                        checkboxLabel="We pay for parts"
                        fieldCols={6}
                        labelCols={3}
                        controlCols={9}
                      />
                    )}
                  </Row>
                  <Row>
                    <Field component={TextField}
                      name="companyEmail"
                      id="companyEmail"
                      type="email"
                      label="Spare Parts Email."
                      placeholder="Enter spare parts email..."
                      fieldCols={6}
                      labelCols={3}
                      controlCols={9}
                    />
                  </Row>
                </div>
              )}
            </Panel>

            <Panel header={<h3>Client - {companyValue ? 'Company Contact' : 'Personal'} Details</h3>}>

              <Row>
                <Field component={TextField}
                  name="clientFirstName"
                  id="clientFirstName"
                  type="text"
                  label="First Name."
                  placeholder="Enter first name..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={9}
                  validate={[required]}
                />

                <Field component={TextField}
                  name="clientLastName"
                  id="clientLastName"
                  type="text"
                  label="Last Name."
                  placeholder="Enter last name..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={9}
                />
              </Row>

              <Row>
                <Field component={TextField}
                  name="mobilePhone"
                  id="mobilePhone"
                  type="text"
                  label="Mobile No."
                  placeholder="Enter mobile No..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={5}
                  normalize={normalizeMobilePhone}
                />

                <Field component={TextField}
                  name="phone"
                  id="phone"
                  type="text"
                  label="Phone No."
                  placeholder="Enter phone No..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={5}
                />
              </Row>

              <Row>
                <Field component={TextField}
                  name="email"
                  id="email"
                  type="email"
                  label="Email."
                  placeholder="Enter email address..."
                  fieldCols={6}
                  labelCols={3}
                  controlCols={9}
                />
              </Row>
            </Panel>

            <FormSection name="Address">
              <Address />
            </FormSection>

            <Panel header={<h3>Notes</h3>}>
              <Row>
                <Field component={TextAreaField}
                  id="notes"
                  name="notes"
                  label="Notes."
                  placeholder="Enter notes here..."
                  fieldCols={12}
                  labelCols={1}
                  controlCols={11}
                />
              </Row>
            </Panel>

            <Panel header={<h3>Client - Bank Details</h3>}>
              <Row>
                <Field component={TextField}
                  name="bankName"
                  id="bankName"
                  type="text"
                  label="Bank Name."
                  placeholder="Enter bank name..."
                  fieldCols={4}
                  labelCols={4}
                  controlCols={8}
                />

                <Field component={TextField}
                  name="bsb"
                  id="bsb"
                  type="text"
                  label="BSB No."
                  placeholder="Enter BSB No..."
                  fieldCols={4}
                  labelCols={4}
                  controlCols={8}
                />


                <Field component={TextField}
                  name="account"
                  id="account"
                  type="text"
                  label="Account No."
                  placeholder="Enter Account No..."
                  fieldCols={4}
                  labelCols={4}
                  controlCols={8}
                />
              </Row>
            </Panel>

            <div className="panel-body">
              <Row>
                <Col xs={4}>
                  <Row>
                    <Col xs={8} xsOffset={4}>
                      <Button bsStyle="primary" type="submit" bsSize="small">
                        <Glyphicon glyph="ok" /> Submit
                      </Button>
                      {' '}
                      <Button type="reset" bsSize="small" onClick={reset}>
                        <Glyphicon glyph="ban-circle" /> Clear
                      </Button>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </div>
          </form>
        </Col>
      </Row >
    )
  }

  let ClientForm = reduxForm({
    form: CLIENT_FORM_NAME,

  })(Client)

        ClientForm = connect(
          state => ({
            initialValues: state.editClient // pull initial values from client reducer
          }),
          { reducer } // bind client loading action creator
        )(ClientForm)

  export default ClientForm

Answer 1

您在导出之前重新定义了 ClientForm。

尝试创建一个新变量来分配您的连接输出。

let ClientForm = reduxForm({
    form: CLIENT_FORM_NAME,

 })(Client)
 
let ClientForm2 = connect(state => ({
 initialValues: { account: 'foo', bsb: 'bar', }
      }),
     { reducer } // bind client loading action creator
)(ClientForm)

export default ClientForm2