我的状态和 Redux 表单有问题。我有一个用户添加名称的表单。当用户点击提交时,他们被重定向到主页,他们输入的名称显示在那里。我遇到的问题是,当您添加另一个名称时,以前的名称会被新名称替换。我希望它们都显示在主页上,而不仅仅是最近添加的。 这是我的添加页面代码:
const renderInput = ({ input, label, meta }) => {
return (
<div>
<label>{label}: </label>
<input {...input} />
{renderError(meta)}
</div>
)
};
const renderError = ({ error, touched }) => {
if (touched && error ) {
return (
<div>
{error}
</div>
)
};
};
const AddPage = (props) => {
const classes = useStyles();
const onSubmit = (formValues) => {
props.addMovement(formValues);
};
return (
<div>
<Header title="Add Page" />
<div className={classes.addPage}>
<div className={classes.addMovementDiv}>
<form onSubmit={props.handleSubmit(onSubmit)} >
<Field
name="movementName"
component={renderInput}
label="Movement Name"
/>
<Field
name="movementWeight"
component={renderInput}
label="One Rep Max"
/>
<button >Submit</button>
</form>
</div>
</div>
</div>
);
};
const mapStateToProps = (state) => {
return {
name: state.move.name,
weight: state.move.weight,
}
};
const mapDispatchToProps = (dispatch) => {
return({
addMovement: (name, weight) => dispatch(addMovement(name, weight)),
})
};
const validate = (formValues) => {
const errors = {};
if (!formValues.movementName) {
errors.movementName = "Please enter a Name";
}
if (!formValues.movementWeight) {
errors.movementWeight = "Please enter a Weight";
}
return errors;
};
const formWrap = reduxForm({
form: 'addMovementForm',
validate: validate,
})(AddPage);
export default connect(mapStateToProps, mapDispatchToProps)(formWrap);
这是我的主页代码:
const HomePage = (props) => {
const classes = useStyles();
const name = props.name?.newMovement?.movementName;
console.log(name);
const displayMovementButtons = () => {
if (!name) {
return (
<div className={classes.noMovementsMessage} >Click add button to begin</div>
)
};
return (
<Button
className={classes.movementButtons}
onClick={() => history.push('/movement/:id')}
>
<div className={classes.movementName} >{name}</div>
</Button>
)
};
return (
<div className={classes.homePageContent} >
<Header title={"Home Page" }/>
<div>{displayMovementButtons()}</div>
<div className={classes.fabDiv}>
<Fab
className={classes.fab}
onClick={() => history.push(`/add`)}>
<AddIcon />
</Fab>
</div>
</div>
);
};
const mapStateToProps = (state) => {
return {
name: state.move
}
};
export default connect(mapStateToProps)(HomePage);
这是我的减速器:
const initialState = {newMovement: []};
const addMovementReducer = (state = initialState, action) => {
const newMovement = "newMovement";
switch (action.type) {
case ADD_MOVEMENT:
return { ...state, [newMovement]: action.payload } ;
default:
return state;
}
};
export default addMovementReducer;
任何帮助将不胜感激!