反应：当尝试将滑块的状态保存到本地存储时，带有 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,})(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>
  );
}

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

提前致谢！

解决方法

这样做在技术上看起来应该可行，但效率很低。

我建议使用定制的钩子，例如 useLocalStorage 或 @rehooks/local-storage

useLocalStorage 很好，因为代码很小且易于理解，它会将您的代码缩小为：

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