我花了四天的大部分时间对此进行努力。我有一个用于更新某些日期的表格。我的要求仅仅是从远程源获取数据,并根据接收到的数据将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);
我只需要将检索到的值作为初始值显示在表单字段中即可。