Redux-Form中Field组件设置initialValue后无法编辑求助

嘿，我之前也踩过这个坑！你这个问题主要出在两个地方：一是自定义的RenderInput组件没和Redux-Form的状态管理打通，二是你在Field上写的自定义onChange覆盖了Redux-Form的默认状态更新逻辑。咱们一步步来修复：

1. 先把RenderInput组件改对 #

Redux-Form的Field会给自定义组件传递一个input对象，里面包含value、onChange这些核心属性——你的RenderInput必须用上这些，才能和表单状态同步。

假设你之前的RenderInput是这样的（错误示例）：

const RenderInput = ({ placeholder, type }) => {
  return <input type={type} placeholder={placeholder} />;
};

改成这样就对了：

const RenderInput = ({ input, placeholder, type }) => {
  // 直接使用Redux-Form传递的input对象里的状态和方法
  return (
    <input
      type={type}
      placeholder={placeholder}
      value={input.value}
      onChange={input.onChange}
      onBlur={input.onBlur} // 可选，但加上更符合表单交互规范
    />
  );
};

2. 调整Field的onChange逻辑 #

你原来的onChange直接自己处理了输入值，但没让Redux-Form更新它的内部状态，所以输入框一直停留在initialValue。咱们得先让Redux-Form更新状态，再执行你的防抖提交逻辑。

更推荐的做法是不在Field上直接写onChange，而是监听表单状态变化来触发防抖提交，代码会更清晰：

方式一：用生命周期监听值变化 #

先通过formValueSelector获取hours的值，再在componentDidUpdate里监听变化：

import { formValueSelector, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

class YourProductionForm extends React.Component {
  componentDidUpdate(prevProps) {
    // 当hours值变化时，执行防抖提交
    if (prevProps.hours !== this.props.hours) {
      this.debounceSubmitProduction({
        ...this.props.formValues,
        hours: this.props.hours
      });
    }
  }

  render() {
    return (
      <Field
        name="hours"
        type="number"
        placeholder="Ingrese las horas para esta categoría"
        component={RenderInput}
      />
    );
  }
}

// 替换成你的表单名称
const FORM_NAME = 'productionForm';
const selector = formValueSelector(FORM_NAME);

const mapStateToProps = state => ({
  hours: selector(state, 'hours'),
  formValues: state.form[FORM_NAME]?.values || {}
});

// 把初始值统一放在reduxForm配置里，比单个Field设置更规范
export default connect(mapStateToProps)(
  reduxForm({
    form: FORM_NAME,
    initialValues: { hours: '100' }
  })(YourProductionForm)
);

方式二：一定要在Field的onChange里处理？ #

那你得先调用Redux-Form的input.onChange更新状态，再执行自己的逻辑：

<Field
  name="hours"
  type="number"
  placeholder="Ingrese las horas para esta categoría"
  component={RenderInput}
  onChange={(event, newValue, _, input) => {
    // 先让Redux-Form更新表单状态
    input.onChange(event);
    // 再执行防抖提交
    handleSubmit(currentValues => 
      this.debounceSubmitProduction({ ...currentValues, hours: newValue })
    )();
  }}
/>

3. 额外提示：initialValue的正确姿势 #

尽量在reduxForm的配置里设置initialValues，而不是在单个Field上单独设置——这样所有表单字段的初始值集中管理，不容易出错。

按照上面的步骤改完，你的输入框应该就能正常编辑，同时防抖提交逻辑也能正常工作了！

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