Redux-form initialValues不更新状态，输入框无值显示求助

我看到你在使用redux-form时遇到了输入框没法正常显示设置值的问题，结合你贴出的部分代码，我整理了几个常见的排查方向和解决办法：

1. 确认初始值是否正确传入 #

redux-form需要通过initialValues来传递表单的初始值，有两种常用方式：

• 方式一：在reduxForm配置中直接设置

// 先定义组件类，再用reduxForm包裹
const FormWithRedux = reduxForm({
  form: 'syncValidation', // 表单的唯一标识，必须设置
  initialValues: { username: '你的默认值' }, // 这里填入要显示的初始值
  validate,
  warn
})(SyncValidationForm);

• 方式二：通过props传递给表单组件

// 在使用表单的父组件中传递
<SyncValidationForm initialValues={{ username: '你的默认值' }} />

2. 检查Field组件的name属性是否匹配 #

一定要保证Field组件的name属性和initialValues里的键完全一致，比如：

<Field
  name="username" // 这个name必须和initialValues中的键对应
  component={renderTextField}
  label="用户名"
/>

如果name不匹配，redux-form没法把对应的值绑定到输入框上。

3. 确认自定义渲染组件正确处理value #

你用到的renderTextField是自定义组件，它需要正确接收并渲染redux-form传递的input.value，正确的实现大概是这样的：

const renderTextField = ({ input, label, meta: { touched, error }, ...rest }) => (
  <TextField
    label={label}
    error={touched && error}
    {...input} // 这里会自动传递value、onChange等核心属性
    {...rest}
  />
);

如果你的自定义组件没有解构input对象并传递相关属性，输入框就没法显示设置的值。

4. 注意connect和reduxForm的包裹顺序 #

如果同时用了connect和reduxForm，一定要注意包裹顺序：先让reduxForm包裹组件，再用connect包裹处理后的组件，避免connect覆盖reduxForm的props：

// 正确顺序示例
const ReduxFormWrapper = reduxForm({
  form: 'syncValidation',
  validate,
  warn
})(SyncValidationForm);

export default connect(mapStateToProps, mapDispatchToProps)(ReduxFormWrapper);

5. 手动设置值的情况 #

如果是要在代码里手动设置表单值，需要使用redux-form提供的change action：

import { change } from 'redux-form';

// 在组件中通过dispatch触发
this.props.dispatch(change('syncValidation', 'username', '手动设置的值'));

这里第一个参数是你的表单标识（就是reduxForm配置里的form值），第二个是字段name，第三个是要设置的值。

另外你提供的代码里render方法的sub...看起来是截断了，如果还有其他相关代码（比如mapStateToProps的逻辑、完整的reduxForm配置），可以补充后再进一步排查，但先试试上面的几个方案，应该能解决大部分这类问题。

内容的提问来源于stack exchange，提问作者Wouter