Не удалось получить начальные значения для Redux-Form - PullRequest
0 голосов
/ 26 октября 2019

Я провел большую часть четырех дней, борясь с этим. У меня есть форма, которая используется для обновления какой-либо даты. Мое требование - просто получать данные из удаленного источника и иметь начальные значения в наборе форм на основе полученных данных. Затем пользователь вносит изменения и отправляет. Данные успешно извлекаются из удаленного источника, но я не могу получить данные для заполнения полей формы.

Установка начальных значений в функции соединения приводит к тому, что каждое из них не определено. Примечание: я поставил начальное значение. Примечание: если я не включу данные, полученные из хранилища за пределами 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);

Мне просто нужно получить полученные значения, чтобы они отображались в полях формы в качестве начальных значений.

...