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