React:尝试将滑块的状态保存到本地存储时，useEffect挂钩的滑块无法正常工作

import React, { useState, useEffect } from 'react';

const SliderComponent = () => {
  // 使用useState初始化滑块状态，并尝试从本地存储读取初始值
  const [sliderValue, setSliderValue] = useState(() => {
    const savedValue = localStorage.getItem('sliderValue');
    return savedValue ? parseInt(savedValue, 10) : 50; // 默认值为50
  });

  // 使用useEffect监听滑块值的变化，并将其保存到本地存储
  useEffect(() => {
    localStorage.setItem('sliderValue', sliderValue);
  }, [sliderValue]); // 依赖数组中只包含sliderValue

  return (
    <div>
      <input
        type="range"
        min="0"
        max="100"
        value={sliderValue}
        onChange={(e) => setSliderValue(parseInt(e.target.value, 10))}
      />
      <p>当前值: {sliderValue}</p>
    </div>
  );
};

export default SliderComponent;