Question

我有一个2步向导表单使用redux-form，但当我返回第一页时，第一页的状态消失了，我的表格如下：

我的容器组件：

...
import Add1 from './Add1';
import Add2 from './Add2';

class Add extends Component{
    render(){
        let { add } = this.props;
        return (
            <div>
                {add.get('step') == '1' && <Add1 {...this.props}/>}
                {add.get('step') == '2' && <Add2 {...this.props}/>}
            </div>
        );
    }
}

export default Add;

我的Add1组件：

...
export const fields = ['username', 'password'];

class Add1 extends Component{
    toNextStep(){
        //change the step of state;
    }
    render(){
        let {fileds:{username, password}, handleSubmit} = this.props;

        return (
            <form onSubmit={handleSubmit(this.toNextStep.bind(this))}>
                <input type="text" {...username}/>
                <input type="text" {...password}/>
                <input type="submit" value="Next Step"/>
            </form>
        );
    }
}

export default reduxForm(
    {
        form: 'add',
        fields,
        destroyOnUnmount: false
    }
)(Add1);

我的Add2组件：

...
export const fields = ['username', 'password', 'sex'];

class Add2 extends Component{
    toPrevPage(){
        //change the step of state;
    }
    render(){
        let {fields: {sex},handleSubmit} = this.props;
        return (
            <div>
               <select {...sex}>
                    <option value="1">Male</option>
                    <option value="2">Female</option>
               </select>
               <button type="button" onClick={this.toPrevPage.bind(this)}>Prev</button>
            </div>
        );
    }
}

export default reduxForm(
{
    form: 'add',
    fields: fields,
    destroyOnUnmount: false
},
state => {
    return {
        //If I have initalValues here, the problem is arisen!!!!
        initialValues: {
            sex: 2
        }
    }
}
)(Add2);

问题是：当我在第二页中有initialValues时，我点击上一页按钮，第一页的状态是第一次丢失（用户名和密码），我不知道如何处理这个问题，有人可以帮助我吗？

Answer 1

无需使用不同的表单名称。但这个错字可能会导致问题。

let {fileds:{username, password}, handleSubmit} = this.props;
     ^^^^^^

Answer 2

您需要为表单指定不同的名称，例如form: 'add1'和form: 'add2'，然后您将为每个表单分配不同的状态，以便不会覆盖它们

为什么redux-form向导形式不能保存状态？

2 个答案: