React Typescript用MUI Slider调音量出现类型不匹配错误如何解决

• parseFloat() 方法仅接收字符串类型作为入参，你代码中newValue / 100的计算结果为数字类型，直接传入parseFloat就会触发类型不匹配报错，本场景下完全不需要使用parseFloat做转换。
• Material UI的Slider组件onChange回调的第一个参数是事件对象，第二个参数才是滑块的当前值，你当前的函数参数定义位置错误，无法拿到正确的滑块值。
• 你的滑块value属性写死为固定值50，没有绑定到state存储的音量值，拖动滑块后视图不会同步更新。

1. 修正事件处理函数的参数和逻辑：

const handleState = (_event: React.SyntheticEvent, newValue: number | number[]) => {
  // 单滑块场景下newValue为数字类型，直接计算得到0-1区间的音量值即可
  setState({ ...state, volume: (newValue as number) / 100 });
};

2. 修正Slider组件的双向绑定：

<Slider
  min={0}
  max={100}
  // 将state中存储的0-1区间音量值转换为滑块需要的0-100区间值
  value={state.volume * 100}
  onChange={handleState}
/>

可选类型优化 #

如果需要完善状态的类型定义，可以补充声明：

interface PlayerState {
  volume: number;
  // 可扩展其他播放器状态字段
}

const [state, setState] = useState<PlayerState>({
  volume: 0.5
});

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