Reactjs 反应：尝试保存滑块时，带useEffect挂钩的滑块工作不正常'；将状态保存到本地存储中

我试图使用UseEffect钩子将滑块的状态保存在本地存储中，这样当用户刷新页面时，滑块中的选定值不会丢失。但是，当我添加此功能时，滑块的动作很奇怪

以下是父组件中的代码：

function ParentComponent() {
  const [prefState, setPrefState] = React.useState(50);

  React.useEffect(() => {
    const data = window.localStorage.getItem("pref_state");
    if (data) {
      setPrefState(JSON.parse(data));
    }
  }, []);
  
  React.useEffect(() => {
    window.localStorage.setItem("pref_state", JSON.stringify(prefState));
  });


  const handlePrefSliderChange = (event, new_value) => {
    setPrefState(new_value);
  };
  
  return (
    <div className={classes.root}>
       <Grid item xs={12} >
         <CustomizedPrefSlider
           PrefSliderValues={prefState}
           onPrefSliderChange={handlePrefSliderChange} 
         />
       </Grid>
    </div>
  );
}

export default ParentComponent;

const PrefSlider = withStyles({
  root: {
    color: '#52af77',
    height: 8,
    padding: '13px 0',
  },
  track: {
    height: 8,
  },
  rail: {
    color: '#d8d8d8',
    opacity: 1,
    height: 8,
  },

})(Slider);
export default function CustomizedPrefSlider({PrefSliderValues, onPrefSliderChange}) {
  const classes = useStyles();

  return (
    <div>
      <div className={classes.title}>
      <Typography className={classes.titleFont}>
        How important is this feature to you? 
      </Typography>
      </div>
      <div className={classes.root}>
        <PrefSlider
          aria-labelledby="discrete-slider"
          value={PrefSliderValues}
          onChange={onPrefSliderChange}
          min={0}
          max={100}
          step={25}
        />
      </div>
    </div>
  );
}

函数ParentComponent（）{
const[prefState，setPrefState]=React.useState（50）；
React.useffect（（）=>{
const data=window.localStorage.getItem（“pref_状态”）；
如果（数据）{
setPrefState（JSON.parse（data））；
}
}, []);
React.useffect（（）=>{
setItem（“pref_状态”，JSON.stringify（prefState））；
});
常量handlePrefSliderChange=（事件，新值）=>{
setPrefState（新的_值）；
};
返回(
);
}
导出默认父组件；

以下是子组件的代码：

function ParentComponent() {
  const [prefState, setPrefState] = React.useState(50);

  React.useEffect(() => {
    const data = window.localStorage.getItem("pref_state");
    if (data) {
      setPrefState(JSON.parse(data));
    }
  }, []);
  
  React.useEffect(() => {
    window.localStorage.setItem("pref_state", JSON.stringify(prefState));
  });


  const handlePrefSliderChange = (event, new_value) => {
    setPrefState(new_value);
  };
  
  return (
    <div className={classes.root}>
       <Grid item xs={12} >
         <CustomizedPrefSlider
           PrefSliderValues={prefState}
           onPrefSliderChange={handlePrefSliderChange} 
         />
       </Grid>
    </div>
  );
}

export default ParentComponent;

const PrefSlider = withStyles({
  root: {
    color: '#52af77',
    height: 8,
    padding: '13px 0',
  },
  track: {
    height: 8,
  },
  rail: {
    color: '#d8d8d8',
    opacity: 1,
    height: 8,
  },

})(Slider);
export default function CustomizedPrefSlider({PrefSliderValues, onPrefSliderChange}) {
  const classes = useStyles();

  return (
    <div>
      <div className={classes.title}>
      <Typography className={classes.titleFont}>
        How important is this feature to you? 
      </Typography>
      </div>
      <div className={classes.root}>
        <PrefSlider
          aria-labelledby="discrete-slider"
          value={PrefSliderValues}
          onChange={onPrefSliderChange}
          min={0}
          max={100}
          step={25}
        />
      </div>
    </div>
  );
}

const prefslaider=带样式({
根目录：{
颜色：“#52af77”，
身高：8，
填充：“13px 0”，
},
轨道：{
身高：8，
},
铁路：{
颜色：'#d8d8d8'，
不透明度：1，
身高：8，
},
})（滑块）；
导出默认函数CustomizedPrefSlider（{PrefSliderValues，onPrefSliderChange}）{
const classes=useStyles（）；
返回(
此功能对您有多重要？
);
}

这是保存滑块状态以避免用户刷新页面时丢失数据的正确方法吗？为什么我在添加此功能时会丢失一些添加到滑块中的样式

---

提前谢谢

这样做从技术上看应该是可行的，但似乎效率很低

我建议使用定制的钩子，比如

useLocalStorage

很好，因为代码很小，很容易理解，它可以将代码缩减为：

const [prefState, setPrefState] = useLocalStorage(50);

---

谢谢如果我使用Redux或React的上下文挂钩，我还需要这个自定义挂钩吗？