无法获取要为Redux-Form设置的initialValues

时间:2019-10-26 17:34:31

标签: reactjs redux-form

我花了四天的大部分时间对此进行努力。我有一个用于更新某些日期的表格。我的要求仅仅是从远程源获取数据,并根据接收到的数据将initialValues设置为表单。然后,用户进行更改并提交。从远程源成功获取了数据,但是我无法获取数据来填充表单字段。

在connect函数中设置initialValues会导致每个值都未定义。注意:我输入了初始值。注意:如果我不包括从initialValue外部的商店检索到的数据,它将无法工作。这让我完全困惑。我已经阅读了数百篇文章,但没有任何效果。

  import React, { Fragment, Component } from "react";
  import { Field, reduxForm } from "redux-form";
  import { connect } from 'react-redux';
  import { getDataResource } from '../../../actions'
  import {  Form, Input, Button, Dropdown } from "semantic-ui-react";


  const theSource = [
    { text:"Internal",value: 1 },
    { text:"External",value: 2 }
  ]


  const dataState =[  
    {text:"dormant",value: 3 },
    {text:"low",value: 1 },
    {text:"viral",value: 2 }

  ]
  const theFormat = [
    {text:"SQL",value: 1},
    {text:"JSON",value: 2}
  ]


  class UpdateData extends Component {

    constructor( props ) {
      super( props );

      this.state={

      }

    }

    componentDidMount(){
        this.props.dispatch(getDataResource(this.props.theId));
    }

    renderSelect = (field) => (    
      <Form.Select
        label={field.label}
        name={field.input.name}
        onChange={(e, { value }) => field.input.onChange(value)}
        options={field.options}
        placeholder={field.placeholder}
        value={field.input.value}
      />
    );

    renderTextArea = field => (
      <Form.TextArea
        {...field.input}
        label={field.label}
        placeholder={field.placeholder}
      />
    );

    render(){

      return (
        <Fragment>
          <Form className="form ui" onSubmit={this.handleSubmit}>
                <h4>Information</h4>

                <Field
                    size="small"
                    component={Form.Input}
                    name="dname"
                />

                <Field
                    size="small"
                    component={Form.Input}
                    name="location"
                    placeholder={`Reference: ${this.props.location}`}
                />

                <Field
                    component={this.renderTextArea}
                    size="small"
                    name="description"
                    placeholder="Important details about resource"
                /> 
                <h4>Critical details about the data  </h4>
                <Field
                    size="small"
                    component={this.renderSelect}
                    name="source"
                    options={theSource}
                />
                <Field
                    size="small"
                    component={this.renderSelect}
                    name="state"
                    options={dataState}
                    placeholder={`Level of data tidiness is: ${state}`}
                />
                <Field
                    size="small"
                    component={this.renderSelect}
                    name="format"
                    options={theFormat}
                />

            <Button primary type='submit'>Add Resource</Button> 
          </Form>
        </Fragment>

      )


    }


  }


  UpdateData = reduxForm({
     form: 'UpdateFormReactWidgets'
  })(UpdateData)


  export default connect((state) => ({
    initialValues: {
      dname: state.dataDetailResource.name,
      description: state.dataDetailResource.description,
      location: state.dataDetailResource.location,
      source: state.dataDetailResource.source,
      state: state.dataDetailResource.state,
      format: state.dataDetailResource.format
    },
    enableReinitialize: true
    /*,
      dname: state.dataDetailResource.name,
      description: state.dataDetailResource.description,
      location: state.dataDetailResource.location,
      source: state.dataDetailResource.source,
      state: state.dataDetailResource.state,
      format: state.dataDetailResource.format*/
  }))(UpdateData);

我只需要将检索到的值作为初始值显示在表单字段中即可。

0 个答案:

没有答案
相关问题