React自定义组件为何无法正确接收设置的value属性值？

问题根源 #

你的YesNoIcon组件在新建表单中始终渲染为true状态，核心原因有两个：

1. 组件内部维护了独立的state，没有完全遵循Ant Design Form的受控组件规范，导致表单状态与组件状态脱节
2. graphicalYesNoField中手动传递value={initially}的方式，覆盖了Form自动传递的字段值，新建表单时Form的初始值无法正确作用于组件

解决方案 #

1. 将YesNoIcon改为纯受控组件 #

移除组件内部的state，完全依赖外部传入的value和onChange，让Form统一管理状态：

import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';

export const YesNoIcon = ({ 
  value = true, 
  fontSize = '24px', 
  onChange 
}: {
  value?: boolean;
  fontSize?: string;
  onChange?: (value: boolean) => void;
}) => {
  const toggle = () => {
    onChange?.(!value);
  };

  return value ? (
    <CheckCircleFilled 
      style={{ color: 'green', fontSize }} 
      onClick={toggle} 
    />
  ) : (
    <CloseCircleFilled 
      style={{ color: 'red', fontSize }} 
      onClick={toggle} 
    />
  );
};

2. 修正graphicalYesNoField的表单绑定逻辑 #

不再手动给YesNoIcon传value，而是通过Form.Item的initialValue设置字段初始值，让Form自动完成值的传递：

import { Col, Form } from 'antd';
import { YesNoIcon } from './YesNoIcon';

export const graphicalYesNoField = (
  name: string, 
  label: string, 
  initialValue: boolean = true, 
  columnSpan: number = 8, 
  fontSize: string = '24px'
) => {
  return (
    <Col span={columnSpan}>
      <Form.Item 
        name={name} 
        label={label}
        initialValue={initialValue}
      >
        <YesNoIcon fontSize={fontSize} />
      </Form.Item>
    </Col>
  );
};

为什么之前的代码无效？ #

• 原组件的useState和useEffect组合，会在Form初始化过程中出现值同步延迟，尤其是新建表单时Form初始值的传递时机晚于组件初始渲染
• 手动传递value={initially}会覆盖Form自动注入的字段值，导致新建表单时Form的初始设置无法生效

修改后组件完全遵循Ant Design Form的受控组件规范，新建/编辑场景下都会正确渲染对应状态，点击切换时也会同步更新表单字段值。

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