[英]value is not shown in the field when using redux form
I am using redux-form for the form. 我正在为表单使用redux-form。 The form gets submitted but if page is refreshed I need to show that submitted data which comes from the server. 表单已提交,但是如果刷新页面,则需要显示来自服务器的提交数据。 Everything is working, the local state is also updated from getDerivedStateFromProps
but the field does not show with the data. 一切正常,本地状态也从getDerivedStateFromProps
更新,但是该字段未与数据一起显示。 I used plain input tag and it shows up the data. 我使用了普通输入标签,它显示了数据。 What have i missed? 我错过了什么?
Here is what I have done 这是我所做的
UPDATE 更新
const mapStateToProps = (state) => {
const { company } = state.profile.companyReducer;
return {
getCompany: state.profile.companyReducer,
initialValues: company && company.records,
};
};
const mapDispatchToProps = dispatch => ({
loadCompany: () => dispatch(loadCompany()),
saveCompany: companyData => dispatch(saveCompany(companyData)),
});
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
const withReduxForm = reduxForm({
form: 'companyForm',
fields: requiredFields,
validate,
// initialValues: {
// company_name: 'company',
// },
destroyOnUnmount: false,
enableReinitialize: true,
keepDirtyOnReinitialize: true,
});
const initialState = {
company_name: 'hello',
website: '',
industry: '',
number_of_employees: '',
phone_number: '',
founded: '',
address: '',
city: '',
state: '',
zip_code: '',
country: '',
wiki: '',
headquarter: '',
speciality: '',
type: '',
};
const enhance = compose(
withReduxForm,
withConnect,
withState('company', 'updateCompany', initialState),
withHandlers({
handleChange: props => ({ target: { name, value } }) => {
props.updateCompany({ ...props.company, [name]: value });
},
handleSubmit: props => (event) => {
event.preventDefault();
props.saveCompany(props.company);
},
}),
setStatic('getDerivedStateFromProps', (nextProps) => {
const { company } = nextProps.getCompany;
if (company && company.records !== undefined) {
console.log('company records getDerivedStateFromProps', company.records);
return {
company: company.records,
};
}
return null;
}),
lifecycle({
componentDidMount() {
this.props.loadCompany();
},
}),
);
export default enhance;
const Company = ({
company,
handleChange,
handleSubmit,
}: {
company: Object,
handleChange: Function,
handleSubmit: Function
}) => {
console.log('company', company);
return (
<React.Fragment>
<FormHeadline headline="Company" weight="400" />
<Wrapper>
<GridContainer container spacing={24}>
<StyledForm autoComplete="off" onSubmit={handleSubmit}>
<FormWrapper>
<input
name="company_name"
id="company_name"
type="text"
label="Company Name"
className="input-field"
value={company.company_name}
onChange={handleChange}
/>
{/* <Field
id="company_name"
name="company_name"
type="text"
label="Company Name"
className="input-field"
value="Hello"
onChange={handleChange}
component={GTextField}
required
margin="normal"
/> */}
<Field
id="website"
name="website"
type="text"
label="Website"
placeholder="Website"
className="input-field"
value={company.website}
onChange={handleChange}
component={GTextField}
required
margin="normal"
/>
</FormWrapper>
</StyledForm>
</GridContainer>
</Wrapper>
</React.Fragment>
);
};
export default enhance(Company);
generic text field
const GTextField = ({
input,
label,
meta: { touched, error },
...rest
}: {
input: any,
label: Node,
meta: {
touched: boolean,
error: boolean
}
}) => {
console.log('rest', input);
return (
<TextField
label={label}
helperText={touched && error}
error={!!(touched && error)}
{...input}
{...rest}
/>
);
};
This works but not the Field one 这有效,但不是现场一
<input
name="company_name"
id="company_name"
type="text"
label="Company Name"
className="input-field"
value={company.company_name}
onChange={handleChange}
/>
UPDATE 更新
props.initialValues shows the following but still the field is not updated props.initialValues显示以下内容,但该字段未更新
here is the full code 这是完整的代码
https://gist.github.com/MilanRgm/e3e0592c72a70a4e35b72bb6107856bc https://gist.github.com/MilanRgm/e3e0592c72a70a4e35b72bb6107856bc
Hi first replace the input tag with the commented out field component itself then set these flags in reduxform 嗨,首先用注释掉的字段组件本身替换输入标签,然后在reduxform中设置这些标志
const withReduxForm = reduxForm({
form: 'companyForm',
fields: requiredFields,
validate,
destroyOnUnmount: false,
enableReinitialize: true,
keepDirtyOnReinitialize: true
});
as well as pass the initialValues props to the form container with the server response 以及将带有服务器响应的initialValues属性传递到表单容器
{
company_name: 'response value from server'
}
Hi checkout this fiddle link for initialValues example. 您好,请查看此小提琴链接以获取initialValues示例。 For your example with reducer 以减速机为例
const mapStateToProps = state => ({
getCompany: state.profile.companyReducer,
initialValues: state.profile.[your reducer object] });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.