如何解决反应:当尝试将滑块的状态保存到本地存储时,带有 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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。