Redux存储的组件可见性数据在Material UI Switch组件中访问异常问题

问题根因 #

1. Reducer初始值配置错误：你为visibility状态设置的初始值是空数组[]，但接口返回并存储的是对象结构，首次渲染时数组不存在profile、contact等自定义属性，读取结果为undefined。
2. MUI Switch受控逻辑失效：当checked属性接收到undefined时，Switch组件会自动切换为非受控模式，内部状态独立管理，后续即使Redux中的visibility更新为正确的对象，Switch也不会响应属性变化更新状态，最终导致开关状态异常。

解决方案 #

1. 修正Reducer初始值 #

将空数组初始值替换为符合字段结构的默认对象，同时返回新值时做合并兼容，避免后端返回缺字段导致异常：

// Reducer.js
const reducer = (visibility = {
  profile: false,
  contact: false,
  education: false,
  skills: false,
  experiences: false,
  projects: false,
  achievements: false
} , action) => {
  switch(action.type){
    case 'FETCH_VISIBILITY':
      // 合并默认值和接口返回值，避免字段缺失
      return {...visibility, ...action.payload};
    default:   
      return visibility;
  }
}
export default reducer;

2. 为checked属性兜底默认值 #

给每个Switch的checked属性增加空值合并兜底，确保永远传入布尔值，避免组件切换为非受控模式：

<PurpleSwitch checked={visibility.profile ?? false} onChange={visible} name="profile" />

所有Switch的checked属性都按照上述格式修改即可。

可选优化：增加加载状态 #

接口请求完成前不渲染开关列表，避免用户看到状态跳动：

const Visibility = (props) => {
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const getVis = async () =>{
      await dispatch(getVisibility());
      setLoading(false);
    } 
    getVis();
  }, [dispatch]);

  const visibility = useSelector((state) => state.visibility);

  // 加载中展示占位
  if(loading) return <div>配置加载中...</div>

  // 其余逻辑不变
}

额外问题修复 #

你当前的visible回调中，调用handleChange后直接取visibility传给父组件，拿到的永远是更新前的旧值，因为Redux状态更新是异步的。如果需要传最新的开关值，建议直接从事件对象中取到最新状态拼接后传递：

const visible = event => {
  const { name, checked } = event.target;
  const newVisibility = {...visibility, [name]: checked};
  handleChange(event);
  props.sendData(newVisibility);
}

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