React切换开关适配1/0值及向API回传对应数据的问题

核心要解决两个点：前端开关状态和后端1/0值的双向同步，以及提交时自动把布尔值转回1/0。下面是具体修改方案：

1. 修复ToggleSwitch组件，实现状态同步到父表单 #

原组件只维护了内部的checked状态，但没有通知父组件更新表单values，导致开关切换后表单数据没变化。修改后让组件接收onChange回调，把开关的布尔状态传给父组件：

// ToggleSwitch.tsx
export default function ToggleSwitch(props) {
  const { label1, label2, curValue, onChange } = props; // 新增onChange回调
  const [checked, setChecked] = React.useState(false);
  const classes = useStyles();

  React.useEffect(() => {
    setChecked(curValue);
  }, [curValue]);

  const handleSwitch = e => {
    const newChecked = e.target.checked;
    setChecked(newChecked);
    onChange(newChecked); // 通知父组件状态变化
  };

  return (
    <Box className={classes.toggleSwitch}>
      <Typography>
        {label1}
        <Switch 
          checked={checked}
          onChange={handleSwitch}
          color='primary'
          inputProps={{'aria-label': 'switch'}}
        />
        {label2}
      </Typography>
    </Box>
  );
}

2. 修改DepartmentEdit组件，实现双向值转换 #

• 处理curValue的空值情况，避免初始渲染报错
• 监听ToggleSwitch的变化，把布尔值转成1/0更新到表单values里
• 修复editRecord的逻辑，提交前确保isArchived是1/0格式

// DepartmentEdit.tsx
export function DepartmentEdit(props) {
    const { closeModal, refreshTable, selectedRecord, ltUpdateUrl } = props;
    // 处理values为空的情况，默认给true（对应未归档状态）
    const curValue = values?.isArchived === 1 ? false : true; 

    const validate = (fieldValues = values) => {
        const temp = { ...errors };
        if ('name' in fieldValues)
            { temp.name = fieldValues.name ? '' : 'Department Name is required.'; }
        if ('description' in fieldValues)
            { temp.description = fieldValues.description ? '' : 'Description is required.'; }
        setErrors({
            ...temp
        });
        if (fieldValues === values)
            { return Object.values(temp).every(x => x === ''); }
    };

    const {
        errors,
        setErrors,
        handleInputChange,
        values,
        setValues,
    } = FormFunctions(true, validate);

    React.useEffect(() => {
        if (selectedRecord !== null) {
            setValues({
                ...selectedRecord
            }); 
        }
    }, [selectedRecord, setValues]);

    // 处理开关切换，把布尔值转成1/0更新到表单values
    const handleToggleChange = (isChecked) => {
        setValues({
            ...values,
            isArchived: isChecked ? 0 : 1 // 对应curValue逻辑：true=Active=0，false=Inactive=1
        });
    };

    // 修复编辑记录提交逻辑
    async function editRecord(formValues: any) {
        // 复制表单数据，避免修改原对象
        const submitData = { ...formValues };
        // 双重保险：确保isArchived是1/0格式
        if (typeof submitData.isArchived === 'boolean') {
            submitData.isArchived = submitData.isArchived ? 0 : 1;
        }
        try {
            const res = await axios.put(`${ltUpdateUrl}/${submitData.id}`, submitData);
            console.log(res.data);
            refreshTable();
        } catch (error) {
            console.log('提交错误:', error);
        }
    }

    const handleSubmit = e => {
        e.preventDefault(); 
        if (validate()){
          editRecord(values);
          closeModal();
        }
    };

    return (
      <Form onSubmit={handleSubmit} >
         <Grid item md={8}>
             <Input
                 type='text'
                 onChange={handleInputChange}
                 label='Department Name'
                 name='name'
                 value={values.name ?? ''} // 简化空值判断
                 error={errors.name}
            />
         </Grid>
         <Grid item md={4}>
             <ToggleSwitch
                 label1='Inactive'
                 label2='Active'
                 curValue={curValue}
                 onChange={handleToggleChange} // 绑定状态同步回调
             />
          </Grid>
          <Grid>
             <Button
                 type='submit'
                 text='Submit'
                 onClick={handleSubmit} // 绑定正确的提交逻辑
             />
             <Button
                 text='Cancel'
                 color='default'
                 onClick={closeModal}
             />
          </Grid>
      </Form>
    );
}

关键逻辑说明 #

• 前端展示：把后端返回的1（归档/Inactive）转成false，0（未归档/Active）转成true，对应开关的选中状态
• 状态同步：开关切换时，立即把布尔值转回1或0更新到表单values，保证表单数据始终和后端格式对齐
• 提交校验：即使出现意外情况导致isArchived是布尔值，提交前也会自动转换为1/0，确保API能正确接收

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