Мой код использует условный рендеринг для удаления полей из формы DOM. Для избыточной формы значение удаленного поля останется в хранилище форм, и это действительно раздражает. У кого-нибудь есть хорошие идеи, как решить эту проблему? Ниже приведена моя реализация условного рендеринга. Поскольку в моем проекте довольно часто выполняется условный рендеринг, как я могу решить проблему явно?
import React from "react";
import { connect } from "react-redux";
import { Field, getFormValues } from "redux-form";
import { Grid, Form } from "semantic-ui-react";
import RenderFieldSelect from "../../formElements/Select";
import {
PROPERTY_TYPE_1,
PROPERTY_TYPE_2,
SUB_TYPE,
EMPTY_OPTIONS
} from "./SelectOptions";
import { required } from "redux-form-validators";
import { withRouter } from "react-router";
class SummaryAttributes extends React.Component {
render() {
let propertyType; // property type
let propertyTypes = EMPTY_OPTIONS; // propertyTypes options
let hasSubType;
let subTypes = EMPTY_OPTIONS;
const { formValues } = this.props;
if (formValues !== undefined) {
const { scorecardType } = this.props.match.params;
switch (scorecardType) {
case "1":
propertyTypes = PROPERTY_TYPE_1;
break;
case "2":
propertyTypes = PROPERTY_TYPE_2;
break;
default:
}
propertyType = formValues.propertyType;
switch (propertyType) {
case "1":
subTypes = SUB_TYPE;
hasSubType = true;
break;
case "2":
hasSubType = false;
break;
default:
subTypes = SUB_TYPE;
hasSubType = true;
}
}
return (
<div>
<Grid>
<Grid.Row columns = "equal">
<Grid.Column>
<Form.Group widths = "equal">
<Field
name = "propertyType"
component = {RenderFieldSelect}
label = "Property Type"
required = "Y"
options = {propertyTypes}
validate = {[required()]}
/>
</Form.Group>
</Grid.Column>
<Grid.Column>
{hasSubType && (
<Field
name = "subType"
component = {RenderFieldSelect}
label = "Sub Type"
required = "Y"
options = {subTypes}
validate = {[required()]}
/>
)}
</Grid.Column>
</Grid.Row>
</Grid>
</div>
);
}
}
const mapStateToProps = state => ({
formValues: getFormValues("propertyForm")(state)
});
export default withRouter(
connect(
mapStateToProps,
null
)(SummaryAttributes)
);
Редуктор: Index.js
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import loadingReducer from './reducer_loading';
export default combineReducers({
form: formReducer,
loading: loadingReducer
});
Спасибо.
@acdcjunior. Я обновил свой пост.
@PLee - Пожалуйста, поделитесь соответствующим редуктором, чтобы мы могли получить больше информации об управлении состоянием вашей формы.
@джанк. Я использую formReducer из избыточной формы, чтобы получить статус формы. Спасибо.





Я нашел способ решить эту проблему:
import { combineReducers } from "redux";
import {
reducer as formReducer,
actionTypes as formActionTypes
} from "redux-form";
const removeUnregisteredFormFieldValue = (state, action) => {
if (action.type !== formActionTypes.UNREGISTER_FIELD) return state;
const {
values: { [action.payload.name]: unregistered, ...values }
} = state;
return { ...state, values };
};
export default combineReducers({
form: formReducer.plugin({
sampleForm: removeUnregisteredFormFieldValue,
propertyForm: removeUnregisteredFormFieldValue
})
});
Не должно быть слишком сложно. Можете ли вы показать нам код из вашего редукса?