Javascript Redux表单-Redux表单中组件的初始值

新手

我有一个redux表单组件，名为Client。在这种形式下，有一个子组件称为

地址

<代码>地址在客户端中调用，如下所示：

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

  let ClientForm = reduxForm({
    form: CLIENT_FORM_NAME
  })(Client);

  let ClientForm2 = connect(
    (state, ownProps) => ({
      initialValues: ownProps.isEditMode ? state.editClient : {}, // pull initial values from client reducer
      enableReinitialize: true
    }),
    { reducer } // bind client loading action creator
  )(ClientForm);

  export default ClientForm2;

但是，

地址

组件没有在其中设置任何初始状态

在redux表单中，如何将初始状态从主表单向下传递到its子组件——在本例中是

地址

地址容器：

  import React, { Component, PropTypes } from "react";
  import { connect } from "react-redux";
  import { Field, change } from "redux-form";
  import { Col, Panel, Row } from "react-bootstrap";
  import Select from "react-select";

  import Address from "./address";
  import { getSuburbs, ensureStateData } from "./actions";

  import FormField from "../formComponents/formField";
  import TextField from "../formComponents/textField";
  import StaticText from "../formComponents/staticText";

  import { CLIENT_FORM_NAME } from "../clients/client/client";

  export class AddressContainer extends Component {
    static contextTypes = {
      _reduxForm: PropTypes.object.isRequired
    };

    constructor(props, context) {
      super(props, context);

      this.state = {
        selectedSuburb: null
      };
    }

    // Manage Select.Async for new data request - for suburbs.
    handleSuburbSearch = query => {
      const { addressData } = this.props;
      const companyStateId = addressData.companyStateId;

      if (!query || query.trim().length < 2) {
        return Promise.resolve({ options: [] });
      }
      const queryString = {
        query: query,
        companyStateId: companyStateId
      };
      return getSuburbs(queryString).then(data => {
        return { options: data };
      });
    };

    // Update the current state with the selected suburb.
    onSuburbStateChange = value => {
      this.setState({ selectedSuburb: value });
    };

    componentDidMount() {
      this.props.ensureStateData();
    }

    render() {
      const { initialValues, addressData, updatePostcodeValue } = this.props;

      const { value } = this.state;
      const sectionPrefix = this.context._reduxForm.sectionPrefix;

      if (addressData.isLoading || !addressData.states.length) {
        return <p>Loading</p>;
      }
      if (addressData.error) {
        return <p>Error loading data</p>;
      }

      console.group("InitalValues Address");
      const companyStateId = addressData.companyStateId;
      console.log("companyStateId:", companyStateId);
      initialValues.Address = {
        ...initialValues.Address,
        state: addressData.states.find(
          option => option.stateId === companyStateId
        )
      };
      console.log(
        "addressData.states.Find: ",
        addressData.states.find(option => option.stateId === companyStateId)
      );
      console.log("addressData.states: ", initialValues.Address.state);
      console.log("initialValues.Address: ", initialValues.Address);
      console.log("initialValues: ", initialValues);
      console.groupEnd();

      return (
        <Address
          initialValues={initialValues}
          handleSuburbSearch={this.handleSuburbSearch}
          onSuburbStateChange={this.onSuburbStateChange}
          updatePostcodeValue={updatePostcodeValue}
          addressData={addressData}
          sectionPrefix={sectionPrefix}
        />
      );
    }
  }

  const mapStateToProps = state => ({
    initialValues: state.editClient,
    companyStateId: state.companyStateId,
    addressData: state.addressData
  });

  const mapDispatchToProps = dispatch => ({
    ensureStateData: () => dispatch(ensureStateData()),
    getSuburbs: values => dispatch(getSuburbs(values)),
    updatePostcodeValue: (postcode, sectionPrefix) =>
      dispatch(
        change(
          CLIENT_FORM_NAME,
          `${sectionPrefix ? sectionPrefix + "." : ""}postcode`,
          postcode
        )
      )
  });
  export default connect(mapStateToProps, mapDispatchToProps)(AddressContainer);

  import React, { Component, PropTypes } from "react";
  import { connect } from "react-redux";
  import { Field, change, reduxForm } from "redux-form";
  import { Col, Panel, Row } from "react-bootstrap";
  import Select from "react-select";
  import { getSuburbs } from "./actions";
  import FormField from "../formComponents/formField";
  import TextField from "../formComponents/textField";
  import StaticText from "../formComponents/staticText";

  import reducer from "../address/reducer";

  export const Address = props => {
    const {
      initialValues,
      handleSuburbSearch,
      companyValue,
      onSuburbStateChange,
      updatePostcodeValue,
      addressData,
      sectionPrefix
    } = props;

    const { reset } = props;

    {
      console.log("PROPS ADDRESS DATA: ", props.stateData);

      console.log("PROPS INITIALVALIES: ", props.initialValues);

      console.log("COMPANY VALUE: ", companyValue);
    }

    return (
      <Panel header={<h3>Client - Address Details</h3>}>
        <Row>
          <Field
            component={TextField}
            name="address1"
            id="address1"
            type="text"
            label="Address Line 1"
            placeholder="Enter street 1st line..."
            fieldCols={6}
            labelCols={3}
            controlCols={9}
          />
          <Field
            component={TextField}
            name="address2"
            id="address2"
            type="text"
            label="Address Line 2"
            placeholder="Enter street 2nd line..."
            fieldCols={6}
            labelCols={3}
            controlCols={9}
          />
        </Row>
        <Row>
          <Field
            component={props => {
              const { input, id, placeholder, type } = props;
              const {
                fieldCols,
                labelCols,
                controlCols,
                label,
                inputClass
              } = props;

              // The props we want the inner Select textbox to have.
              const { name, onChange } = input;
              const onStateChange = state => {
                console.log("onStateChange", state);
                onChange(state);
              };

              return (
                <FormField
                  id={id}
                  label={label}
                  fieldCols={fieldCols}
                  labelCols={labelCols}
                  controlCols={controlCols}
                  inputClass={inputClass}
                >
                  <Select
                    name={name}
                    onChange={onStateChange}
                    placeholder="Select state"
                    valueKey="id"
                    options={addressData.states}
                    labelKey="stateLabel"
                    optionRenderer={option =>
                      `${option.stateShortName} (${option.stateName})`}
                    value={input.value}
                    selectValue={
                      Array.isArray(input.value) ? input.value : undefined
                    }
                  />
                </FormField>
              );
            }}
            name="state"
            id="state"
            label="State."
            fieldCols={6}
            labelCols={3}
            controlCols={6}
          />
        </Row>
        <Row>
          <Field
            component={props => {
              const { input, id, placeholder, type } = props;
              const {
                fieldCols,
                labelCols,
                controlCols,
                label,
                inputClass
              } = props;

              // The props we want the inner Select.Async textbox to have.
              const { name, value, onChange, onBlur, onFocus } = input;

              // A suburb was selected so "onChange" is updated along
              //with the static form component "Postcode".
              const onSuburbChange = value => {
                onSuburbStateChange(value);
                input.onChange(value);
                updatePostcodeValue(value ? value.postcode : null, sectionPrefix);
              };

              return (
                <FormField
                  id={id}
                  label={label}
                  fieldCols={fieldCols}
                  labelCols={labelCols}
                  controlCols={controlCols}
                  inputClass={inputClass}
                >
                  <Select.Async
                    {...input}
                    onChange={onSuburbChange}
                    placeholder="Select suburb"
                    valueKey="id"
                    labelKey="suburbName"
                    value={input.value}
                    loadOptions={handleSuburbSearch}
                    backspaceRemoves={true}
                  />
                </FormField>
              );
            }}
            name="suburb"
            id="suburb"
            label="Suburb."
            fieldCols={6}
            labelCols={3}
            controlCols={9}
          />
        </Row>
        <Row>
          <Field
            component={StaticText}
            name="postcode"
            id="postcode"
            label="Postcode."
            fieldCols={6}
            labelCols={3}
            controlCols={9}
          />
        </Row>
      </Panel>
    );
  };
  Address.propTypes = {
    handleSuburbSearch: PropTypes.func.isRequired,
    onSuburbStateChange: PropTypes.func.isRequired
  };

  const AddressForm = reduxForm({
    form: "Address"
  })(Address);

  let AddressForm2 = connect(
    (state, ownProps) => ({
      initialValues: state.editClient, // pull initial values from client reducer
      enableReinitialize: true
    }),
    { reducer } // bind client loading action creator
  )(AddressForm);

  export default Address;

import React，{Component，PropTypes}来自“React”；
从“react redux”导入{connect}；
从“redux表单”导入{Field，change}；
从“react bootstrap”导入{Col，Panel，Row}；
从“反应选择”导入选择；
从“/Address”导入地址；
从“/actions”导入{getdata}；
从“./formComponents/FormField”导入FormField；
从“./formComponents/TextField”导入文本字段；
从“./formComponents/StaticText”导入StaticText；
从“./clients/CLIENT/CLIENT”导入{CLIENT\u FORM\u NAME}；
导出类AddressContainer扩展组件{
静态上下文类型={
_reduxForm:PropTypes.object.isRequired
};
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
Selected:空
};
}
//为新数据请求管理Select.Async-为郊区。
handleSuburbSearch=查询=>{
const{addressData}=this.props；
const companyStateId=addressData.companyStateId；
如果（！query | | query.trim（）.length<2）{
返回Promise.resolve（{options:[]}）；
}
常量查询字符串={
查询：查询，
companyStateId:companyStateId
};
返回getSubpures（查询字符串）。然后返回（数据=>{
返回{options:data}；
});
};
//使用所选选项更新当前状态。
onSuburbStateChange=值=>{
this.setState（{selectedsubstance:value}）；
};
componentDidMount（）{
this.props.data（）；
}
render（）{
const{initialValues，addressData，updatePostcodeValue}=this.props；
const{value}=this.state；
const sectionPrefix=this.context.\u reduxForm.sectionPrefix；
if（addressData.isLoading | |！addressData.states.length）{
返回加载；
}
if（addressData.error）{
返回加载数据时出错
；
}
控制台组（“初始值地址”）；
const companyStateId=addressData.companyStateId；
log（“companyStateId:”，companyStateId）；
初始值。地址={
…initialValues.Address，
状态：addressData.states.find(
option=>option.stateId==companyStateId
)
};
console.log(
“addressData.State.Find:”，
addressData.states.find（option=>option.stateId===companyStateId）
);
log（“addressData.states:”，initialValues.Address.state）；
日志（“initialValues.Address:”，initialValues.Address）；
log（“initialValues:”，initialValues）；
console.groupEnd（）；
返回(
Hi@si2030，你得到答案了吗？我被类似的东西绊倒了。。。