如何解决如果在React useEffect中状态值发生变化,如何区分上下文值
const someFunction = () = {
...
const { data,setData,activeIndex,setActiveIndex } = useContext(MusicContext);
useEffect(() => {
console.log(" useEffect called");
// another component called setData or setActiveIndex which resulted here
// how to compare data to its prevState if it changed
// how to compare activeIndex to its prevState if it changed
},[activeIndex,data]);
...
}
上面是一些对两个不同的上下文变量具有useEffect的函数
data
是对象原型{},而activeIndex
是数字
如果data
与它的prevState发生了变化,该如何比较?
如果activeIndex
与它的prevState发生了变化,该如何比较?
我可以在单个useEffect块中完成并需要打开多个吗?
解决方法
您可以useRef
存储最后看到的值。通常将其提取到“ usePrevious”自定义钩子中。
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
现在在组件中,您可以检查以前的值。
const SomeFunction = () = {
...
const { data,setData,activeIndex,setActiveIndex } = useContext(MusicContext);
const prevData = usePrevious( data );
const prevActiveIndex = usePrevious( activeIndex );
useEffect(() => {
if ( data !== prevData ) {
// do something
}
if ( activeIndex !== prevActiveIndex ) {
// do something
}
},[activeIndex,data]);
...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。