Ant Design Radio按钮切换后返回值未更新问题求助（React+Redux）

看起来你遇到的核心问题是表单控件的状态管理冲突，以及没有正确同步Redux中的值到表单组件里。咱们一步步拆解问题并解决：

问题根源分析 #

• 重复的状态管理：你同时用了组件自身的state和Ant Design Form的getFieldDecorator来管理Radio的值，这会导致两个状态源互相干扰——Redux Store已经更新，但控件显示的是组件state的旧值。
• defaultValue的局限性：Radio.Group的defaultValue只在组件初始化时生效，后续Redux的branchDetails更新后，这个值不会自动同步，所以控件显示还是初始的默认值。
• 没有同步props到表单字段：当Redux中的branchDetails.isBranchAvailable变化时，你没有通知Form组件更新对应字段的值，导致显示和Store不一致。

修复方案 #

我们需要让Form完全接管表单控件的值管理，并在Redux props变化时同步更新表单字段：

步骤1：移除冗余的组件state

既然用了getFieldDecorator，它会自动维护表单字段的状态，不需要再用组件自身的state来管理value了。

步骤2：同步Redux props到表单字段

在组件的componentDidUpdate生命周期中，监听branchDetails的变化，一旦更新就调用Form的setFieldsValue方法同步字段值。

步骤3：调整Radio.Group的配置

去掉Radio.Group的defaultValue，由getFieldDecorator来传递value和onChange（getFieldDecorator会自动注入这两个属性）。

修改后的完整代码示例 #

class YourComponent extends React.Component {
  componentDidUpdate(prevProps) {
    // 当Redux中的branchDetails变化时，同步更新表单字段
    if (prevProps.branchDetails !== this.props.branchDetails) {
      this.props.form.setFieldsValue({
        isBranchAvailable: this.props.branchDetails.isBranchAvailable
      });
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form.Item>
        {getFieldDecorator("isBranchAvailable", {
          initialValue: this.props.branchDetails.isBranchAvailable
        })(
          <div>
            <label>Branch Available?</label>
            <br />
            <Radio.Group>
              <Radio value={1}>yes</Radio>
              <Radio value={2}>no</Radio>
            </Radio.Group>
          </div>
        )}
      </Form.Item>
    );
  }
}

// 别忘了用Form.create()包装组件，才能拿到form对象
const WrappedComponent = Form.create()(YourComponent);

const mapStateToProps = state => {
  return { branchDetails: state.branchReducer.branch };
};

// 最后连接Redux
export default connect(mapStateToProps)(WrappedComponent);

额外说明 #

如果需要在Radio切换时同步更新Redux Store，可以在getFieldDecorator的onChange回调里处理：

{getFieldDecorator("isBranchAvailable", {
  initialValue: this.props.branchDetails.isBranchAvailable,
  onChange: (e) => {
    // 这里调用Redux action更新Store
    this.props.updateBranchAvailability(e.target.value);
  }
})(/* Radio组件 */)}

这样修改后，Radio的显示就会和Redux Store中的值保持一致，切换时也能正确同步了！

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