有时候,我们在当前组件里注册了第三方插件的事件回调,回掉函数的参数是第三方抛出来的数据,我们在这个回掉里,可能还需要访问当前组件里state,但是你很有可能就会遇到一直拿到的是第一次的state,下面开始上代码。
const [info, setInfo] = useState();
const [isEnd, setIsEnd] = useState(false);
useEffect(() => {
const callBackId1 = Plus.reigsterCallBack1((info) => {
setInfo(info);
});
const callBackId2 = Plus.reigsterCallBack2(info2 => {
if (info2.id === info.id) {
//这里的info将会永远都是null
setIsEnd(true);
}
});
return () => {
Plus.unregisterCallBack(callBackId1);
Plus.unregisterCallBack(callBackId2);
};
}, []);
方案1: useRef
const [info, setInfo] = useState();
const [isEnd, setIsEnd] = useState(false);
const instRef = useRef();//新增
useEffect(() => {
const callBackId1 = Plus.reigsterCallBack1((info) => {
setInfo(info);
instRef.current = info;//新增
});
const callBackId2 = Plus.reigsterCallBack2(info2 => {
if (info2.id === instRef.current.id) {//修改
setIsEnd(true);
}
});
return () => {
Plus.unregisterCallBack(callBackId1);
Plus.unregisterCallBack(callBackId2);
};
}, []);
方案2:useCallback
const [info, setInfo] = useState();
const [isEnd, setIsEnd] = useState(false);
const callBack2 = useCallback(//新增
info2 => {
if (info2.id === info.id) {
setIsEnd(true);
}
},
[info]
);
useEffect(() => {
const callBackId1 = Plus.reigsterCallBack1((info) => {
setInfo(info);
instRef.current = info;
});
const callBackId2 = Plus.reigsterCallBack2(callBack2);//修改
return () => {
Plus.unregisterCallBack(callBackId1);
Plus.unregisterCallBack(callBackId2);
};
}, [callBack2]);//修改
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。