为什么我的组件永远无法获取我正在设置的属性值？

Question

我有一个反应组件和一个方便的功能，用于将其打印在 Ant 设计中

<Col> and <Form.Item>

以便于在表单构建中使用，但无论

<YesNoColumn>

上的“value”属性传递什么，它总是呈现就好像它是真的一样。 Chatgpt 只是建议添加 useEffect，但这并没有解决任何问题。

任何人都可以帮我解决为什么我的组件不会呈现 [false] 变体吗？即使我使用

<YesNoIcon value={false} />

手动设置其值，它也会显示绿色复选标记

export const YesNoIcon = ({ value = true, fontSize = '24px', onChange }) => {
const [toggled, setToggled] = useState(value);
useEffect(() => {
    setToggled(value);
}, [value]);
const triggerChange = (changedValue: boolean) => {
    onChange?.(changedValue);
};
const toggle = () => {
    setToggled(!toggled);
    triggerChange(!toggled);
}
return toggled ?
    <CheckCircleFilled style={{ color: 'green', fontSize: fontSize }} onClick={toggle} onChange={toggle} /> :
    <CloseCircleFilled style={{ color: 'red', fontSize: fontSize }} onClick={toggle} onChange={toggle} />
};

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

请注意，当我尝试显示“创建新”表单而不是“更新现有”表单时，这对我来说只是一个问题。当我更新现有记录时，表单会根据 useForm() 返回的内容适当地设置这些

<YesNoIcon>

表单项。只有当我创建一条新记录时，它总是会退回到默认值，即使我明确地将其中一个记录设置为 false 也是如此。

我用于创建新用户记录和更新现有记录的实际详细信息表单组件如下：

const UserDetails = () => {
const { saveButtonProps, formProps, formLoading, queryResult } = useForm();
return (
    <Edit isLoading={formLoading}
        saveButtonProps={saveButtonProps}
        breadcrumb={true}>
        <Form {...formProps} layout='vertical'>
            <Form.Item hidden name="id" />
            <Row gutter={[32, 32]}>
                {simpleInputField('lastName', 'Last Name')}
                {simpleInputField('firstName', 'First Name')}
                {simpleInputField('middleName', 'Middle Name')}
            </Row><Row gutter={[32, 32]}>
                {simpleInputField('suffix', 'Suffix')}
            </Row><Row gutter={[32, 32]}>
                {simpleInputField('userName', 'User Name', 12)}
                {simpleInputField('email', 'Email', 12)}
            </Row><Row gutter={[32, 32]}>
                {graphicalYesNoField('active', 'Active')}
                {graphicalYesNoField('neverExpires', 'Never Expires', false)}
            </Row>
        </Form>
    </Edit>
)
}

Answer 1

将您的

toggle

功能更改为

const toggle = () => {
    setToggled(prev => {
        triggerChange(!prev);
        return !prev;
    });
}

它是异步执行的，这样，您可以确定使用了

toggled

之前的值。