Question

我有一个包含redux-form ProfileForm的个人资料页面，我为其设置了一些initialValues。在我的页面标题中，我有一个反应路由器Link到/profile路由。

第一次加载页面时，表单会正确初始化。但是，如果我单击Link元素，表单将自行清空。我希望表单保持其值由redux-form状态维护（或至少初始化为initialValues）。

我做错了什么？有解决方法吗？

注意：我正在使用react 16，react-router 4和redux-form 7.我在获取数据时也在动作生成器中使用redux-thunk。

代码

Profile.js

组件Profile在第一次呈现initialValues之前等待ProfileForm设置。在获取数据之前，它会显示Loading组件。

//...
import { 
    fetchData,
    submitData,
} from '../../actions';

class Profile extends Component{
    componentDidMount() {
        this.props.fetchData();
    }

    render(){
        if(!this.props.initialValues){
            return <Loading />
        }else{
            return <ProfileForm initialValues={this.props.initialValues} />
        }
    }
}


class ProfileForm extends Component{
    onSubmit(values){
        return this.props.submitData(values);
    }

    render(){
        const { handleSubmit } = this.props;
        return (
            <div>
                <Form 
                    onSubmit={handleSubmit(this.onSubmit.bind(this))}
                    className="container">
                    <Field
                        name="first_name"
                        type="text" 
                        title="First name" 
                        component={SingleInput} />

                    ...

                    <Button type="submit" 
                        Sumbit
                    </Button>
                </Form>
            </div>
        )
    }
}

// validate, warn, etc.
// ...

function mapStateToProps(state) {
    return { 
        initialValues: state.profile.data // set by the profile reducer upon fetching the data
    };
}

export default connect(mapStateToProps,{ fetchData })(Profile);

ProfileForm = reduxForm({
    form: 'ProfileForm',
    fields: ['first_name', ...],
    enableReinitialize: true,
    validate,
    warn,
})(
    connect(mapStateToProps, { submitData })(ProfileForm)
);

App.js

//src/components/App.js
render() {
    return (
        <div className="App">
            <Header />
            <Main />
        </div>
    );
}

Header.js

Header组件包含指向Link的{{1}}组件。

/profile

Main.js

由于//src/components/header.js render(){ return ( ... <Link className="nav-link" to="/profile">Profile</Link> ... ) }

下的React-Router v4，我可以访问个人资料页面

/profile

编辑：动作生成器和缩减器

我使用//src/components/main.js render(){ return ( <Switch> <Route path='/profile' component={Profile}/> ... </Switch> ) }来获取和提交数据，并使用axios在收到数据后调度回调。

动作生成器

redux-thunk

减速

//src/actions/index.js
export function fetchData(){
    return (dispatch) => {
        axios.get(`${FETCH_URL}`)
            .then(response => {
                dispatch({
                    type: FETCH_DATA_SUCCESS,
                    payload: response.data
                });
            })
            .catch(error => {
                dispatch({
                    type: FETCH_DATA_FAILED,
                    payload: error
                })
            })
    }
}

export function submitData(values){
    return (dispatch) => {
        return axios.post(`${SUBMIT_URL}`,values)
                    .then(response => {
                        dispatch({ 
                            type: SUBMIT_DATA_SUCCESS,
                            payload: values,
                        });
                    })
                    .catch(error => {
                        dispatch({
                            type: SUBMIT_DATA_FAILED,
                            payload: error
                        });
                    })
    };
}

Answer 1

你的问题是表单是出于任何原因卸载/挂载的，我浏览了你的代码，我的第一个想法是Loading组件。当它呈现时，表格不是。您可以做的是以下内容：隐藏表单而不是将其删除（将isVisible或其他内容传递给表单）或者在卸载表单时让redux-form为您保留状态。您可以通过将prop destroyOnUnmount=false设置为reduxForm hoc来执行此操作。

当点击加载相同表单的链接组件时，Redux-form会自行清空

代码

1 个答案: