Redux Form - initialValues 不随状态更新

Posted 2023-02-22

【中文标题】Redux Form - initialValues 不随状态更新

【英文标题】：Redux Form - initialValues not updating with state

【发布时间】：2016-12-17 07:19:20

【问题描述】：

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

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

这是我的问题，我有一个用户网格，当单击用户行时，我将导航到编辑用户页面并在 url 中包含用户 ID。然后在编辑用户页面上，我正在获取 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;

【问题讨论】：

您的用户减速器没有名称，因此当您导入索引减速器时，它不会导入 usersReducer，因为它不存在。在 NPM 中构建时是否遇到任何错误？

我不确定你的意思。我正在导出我的用户减速器，然后将其导入索引 - 从“./users_reducer”导入 usersReducer。我没有收到任何错误，并且我的 User reducer 在所有其他情况下都按预期工作。

我的意思是当你使用“导出默认函数（）”时，你没有给你的函数命名。我希望看到“导出默认函数 usersReducer()”，以便索引缩减器使用它

名称无关紧要。我正在从一个文件中导出一个函数并从另一个文件中导入该函数。当我调用 import usersReducer from './users_reducer'; 时，usersReducer 现在等于从我的 users reducer 文件中导出的函数。

【参考方案1】：

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

我解决了将 enableReinitialize 设置为 true

UsersShowForm = reduxForm(
  form: 'UsersShowForm',
  enableReinitialize: true
)(UsersShowForm)

【讨论】：

解决了这个问题！我花了几个小时试图调试它。谢谢。

也解决了这个问题...它也写在文档中：redux-form.com/6.4.3/examples/initializeFromState

还花了几个小时试图解决这个问题。它应该在文档中更加明确。谢谢

天才！我很高兴找到这篇文章

非常感谢。花了几个小时试图解决这个问题。

【参考方案2】：

要使用资源中的数据预填充redux-form 表单，您可以使用initialValues 属性，在使用reduxForm 连接器装饰组件/容器时会自动读取该属性。 initialValues 中的键与表单字段上的 name 匹配很重要。

注意：需要先应用reduxForm()装饰器，然后再应用redux中的connect()。反过来就不行了。

使用redux-form 7.2.3：

const connectedReduxForm = reduxForm(
 form: 'someUniqueFormId',
  // resets the values every time the state changes
  // use only if you need to re-populate when the state changes
  //enableReinitialize : true 
)(UserForm);

export default connect(
  (state) =>  
    // map state to props
    // important: initialValues prop will be read by redux-form
    // the keys must match the `name` property of the each form field
    initialValues: state.user 
  ,
   fetchUser  // map dispatch to props
)(connectedReduxForm) 

来自官方文档：

提供给 initialValues 属性或 reduxForm() 配置参数的值将被加载到表单状态，然后被视为“原始”。它们也将是派发 reset() 时将返回的值。除了保存“原始”值之外，初始化表单还会覆盖任何现有值。

在official documentation 中查找更多信息和完整示例

【参考方案3】：

在我的情况下，我有 Redux Form, 2 Route 与小的 url 参数更改。 在组件道具之间切换时未更新。 它一直显示空白表格。

示例：baseurl/:id/personal -> baseurl/:id/employment

调试后我发现 mapStateToProps 在设置了初始值的时候没有触发。

<React.Fragment>
  <Route
    exact=true
    path="/path1"
    component=PersonalDetails
    key="personal"
  />
  <Route
    exact=true
    path="/path1/employment"
    component=Employment
    key="employment"
  />
</React.Fragment>

将 destroyOnUnmount 设置为 false mapStateToProps 解决了我的问题，其默认值为 true。

    enableReinitialize: true,
    destroyOnUnmount: false

上面的例子：

UsersShowForm = reduxForm(
  form: 'UsersShowForm',
  enableReinitialize: true,
  destroyOnUnmount: false
)(UsersShowForm)

阅读更多：destroyOnMount