如何使用MUI Switch组件同步修改JSON中的Active字段值

你的代码存在几个核心问题导致逻辑不符合预期：

• MUI Switch组件的onChange事件中，e.target.value不是开关的选中状态，选中状态的布尔值存放在e.target.checked属性中，直接取e.target.value赋值会导致Active字段值错误。
• 单独维护checked状态属于冗余设计，开关状态完全可以由details.Active字段派生，两个独立状态很容易出现数据不同步的问题，比如接口返回Active:0但初始checked为true时，开关显示状态和实际数据不一致。
• details初始值设为空字符串，组件首次渲染时访问details.Active会触发类型报错。
• 两个条件分支返回的JSX只有label文本差异，重复代码冗余。

import { useState, useEffect } from 'react';
import { FormControlLabel, Switch } from '@mui/material';

function YourBusinessComponent() {
  // details初始值设为对象，避免首屏渲染访问属性报错，可根据业务调整初始Active值
  const [details, setDetails] = useState({ Active: 0 });

  // 原有API请求逻辑示例，替换成你实际的接口请求代码即可
  useEffect(() => {
    const getDetailData = async () => {
      // 替换为实际接口请求
      // const res = await fetch('/api/xxx');
      // const data = await res.json();
      // setDetails(data);
    };
    getDetailData();
  }, []);

  const handleSwitchChange = (e) => {
    const checkedStatus = e.target.checked;
    setDetails(prev => ({
      ...prev,
      Active: checkedStatus ? 1 : 0 // 布尔状态转成接口要求的1/0数值格式
    }));
  };

  return (
    <FormControlLabel                   
      control={
        <Switch 
          checked={details.Active === 1} // 选中状态直接和接口字段绑定，无需额外状态
          onChange={handleSwitchChange} 
        />
      }
      label={details.Active === 1 ? "Active" : "Inactive"} // 动态计算标签文本，消除重复代码
      labelPlacement="start"
    />
  );
}

• 开关选中状态直接和接口返回的Active字段强绑定：值为1时选中、值为0时未选中，从根源避免状态错位问题。
• 手动切换开关时，先获取开关的布尔选中值，转换为接口需要的1/0数值后更新到details状态中，后续提交数据直接读取details.Active传参即可。
• 移除冗余的checked状态，统一数据源，降低维护成本。
• 动态渲染label文本，删除重复的条件分支JSX，代码更简洁。
• 修正details初始值类型，避免首屏渲染报错。

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