程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Redux表单-InitialValues不随状态更新大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决Redux表单-InitialValues不随状态更新?

开发过程中遇到Redux表单-InitialValues不随状态更新的问题如何解决?下面主要结合日常开发的经验,给出你关于Redux表单-InitialValues不随状态更新的解决方法建议,希望对你解决Redux表单-InitialValues不随状态更新有所启发或帮助;

更新到redux-form v6.0.0-rc.4后,我遇到了同样的问题。

我解决了将enableReinitialize设置为true

UseRSShowForm = reduxForm({
  form: 'UseRSShowForm',
  enableReinitialize: true
})(UseRSShowForm)

解决方法

我在使用redux-form设置初始格式字段值时遇到一些问题。

我正在使用redux-form v6.0.0-rc.3并反应v15.3.0。

所以这是我的问题,我有一个用户网格,当单击用户行时,我导航到“编辑用户”页面,并将用户ID包括在URL中。然后在“编辑用户”页面上,获取ID并调用fetchUser(this.props.params.id),后者是一个返回this.state.users的操作创建者。然后,我尝试通过调用以下命令来设置表格的初始值:

function mapStateToProps(state) {
    return { initialValues:  state.users.user }
}

据我了解,这应该将initialValues设置为state.users.user,并且每当更新此状态时,initialValues也应该更新。对我来说不是这样。InitialValues设置为先前单击的用户行(即this.state.users.user的先前状态)。因此,我决定对此进行测试并向该组件添加一个按钮,当单击该组件时,我将再次调用fetchUser,其用户ID硬编码为:

this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');

这可以正确更新状态,但initialValues的值不会更改。状态更新时不会更新。我在旧版本的redux-form上测试了完全相同的过程,并且按预期工作。

我在这里做错什么了吗,或者这是我使用的版本的问题?

用户编辑表单-

class UsersShowForm extends Component {

    componentWillMount() {
        this.props.fetchUser(this.props.params.id);
    }

    onSubmit(props){
        console.log('submitting');
    }

    changeUser() {
        this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');
    }

    renderTextField(field) {
        return (
      <TextField 
        floatingLabelText={field.input.label}
        errorText={field.touched && field.error}
        fullWidth={true}
        {...field.input}
      />)
    }

    render() {
        const { handleSubmit,submitting,pristine } = this.props;

        return(

            <div>
                <form onSubmit={handleSubmit(this.onSubmit.bind(this))} className="mdl-cell mdl-cell--12-col">

                    <Field name="emailAddress" component={this.renderTextField} label="Email Address"/>

                    <Field name="firstName" component={this.renderTextField} label="First Name"/>

                    <Field name="lastName" component={this.renderTextField} label="Last Name"/>
                </form>

                <RaisedButton onClick={this.changeUser.bind(this)} label="Primary" primary={true} />
            </div>

        );
    }
}

function mapStateToProps(state) {
    return { initialValues:  state.users.user }
}

UsersShowForm = reduxForm({
  form: 'UsersShowForm'
})(UsersShowForm)

UsersShowForm = connect(
  mapStateToProps,actions              
)(UsersShowForm)

export default UsersShowForm

用户减速器-

import {
    FETCH_USERS,FETCH_USER
} from '../actions/types';

const INITIAL_STATE = { all: [],user: {} };

export default function(state = { INITIAL_STATE },action) {
    switch (action.type) {
        case FETCH_USERS:
            return {...state,all: action.payload };
        case FETCH_USER:
            return {...state,user: action.payload };
        default:
            return state;
    }

}

减速器指数-

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import usersReducer from './users_reducer';

const rootReducer = combineReducers({
    form: formReducer,users: usersReducer
});

export default rootReducer;

大佬总结

以上是大佬教程为你收集整理的Redux表单-InitialValues不随状态更新全部内容,希望文章能够帮你解决Redux表单-InitialValues不随状态更新所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: