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

Question

我有一个包含 redux-form ProfileForm 的配置文件页面，我为其设置了一些 initialValues。在我的页眉中，我有一个指向 /profile 路由的 react-router Link。

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

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

注意:我正在使用 react 16、react-router 4 和 redux-form 7。在获取数据时，我也在我的 Action 生成器中使用 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 组件包含一个指向 /profile 的 Link 组件。

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

Main.js

我有一个个人资料页面，感谢 /profile 下的 React-Router v4 可以访问

//src/components/main.js
render(){
    return (
        <Switch>
            <Route path='/profile' component={Profile}/>
            ...
        </Switch>
    )
}

编辑: Action 生成器和缩减器

我正在使用 axios 获取和提交数据，并在收到数据后使用 redux-thunk 调度回调。

Action 发生器

//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
                        });
                    })
    };
}

reducer

//src/reducers/profile.js
export default function(state={}, action) {
    switch(action.type) {
        case FETCH_DATA_SUCCESS:
            return { ...state, profile: action.payload };
        case FETCH_DATA_FAILED:
            // Note that I never reach this
            return { ...state, profile: {} };
        case SUBMIT_DATA_SUCCESS:
            return { ...state, profile: action.payload };
        case SUBMIT_DATA_FAILED:
            return { ...state };
    }
    return state;
}

Answer 1

你的问题是表单出于某种原因被卸载/装载，我看了一眼你的代码，我的第一个想法是 Loading 组件。当它呈现时，表单不是。您可以做的是以下几点:隐藏表单而不是删除它(将 isVisible 或其他内容传递给表单)或让 redux-form 在卸载表单时为您保留状态。您可以通过将 Prop destroyOnUnmount=false 设置为 reduxForm hoc 来做到这一点。