React：如何通过useEffect从Props设置MUI复选框状态

解决方案 #

你需要给useEffect添加依赖项并同步props值到状态，同时补上缺失的复选框变更处理函数，具体修改如下：

// Component
const UserDialogData = (props) =>{
  const [platform, setPlatform] = useState({
    Android: false,
    Ios: false,
  });

  const { Android, Ios } = platform;

  // 处理复选框状态变更
  const handleChange = (event) => {
    const { name, checked } = event.target;
    setPlatform(prevState => ({
      ...prevState,
      [name]: checked
    }));
  };

  useEffect(() => {    
    // 同步props中的权限值到组件状态
    setPlatform({
      Android: props.IsAndroid,
      Ios: props.isIos
    });
  }, [props.IsAndroid, props.isIos]); // 监听props中权限值的变化

  return(
    <>
      <FormGroup row>
        <FormControlLabel
          control={
            <Checkbox                     
              size="small"
              checked={Android}
              onChange={handleChange}
              name="Android"
            />
          }
          label="Android"
        />
        <FormControlLabel
          control={
            <Checkbox                     
              size="small"
              checked={Ios}
              onChange={handleChange}
              name="Ios"
            />
          }
          label="iOS"
        />
      </FormGroup>
    </>
  );
}

关键说明 #

• useEffect依赖数组：必须添加props.IsAndroid和props.isIos作为依赖，这样当父组件传递的权限值更新时，组件状态会自动同步。
• 函数式状态更新：setPlatform使用函数式更新，确保每次状态变更都基于最新的状态值，避免状态更新的竞态问题。
• 字段名匹配：注意props中的字段拼写（IsAndroid大写I、isIos小写i），要和state中的字段一一对应，避免拼写错误导致同步失败。

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