Redux 表单状态在每次表单提交时都被覆盖

问题描述

我的状态和 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;

任何帮助将不胜感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）