[移动开发]react useMemo 缓存导致缓存组件点击事件获取不到最新值

假如我们有一下两个文件AB, 代码如下
A文件: 通过useMemo把span缓存下来了, 因为只需要menu, 第二个缓存参数只写了menu, 当我们点击span 打印出data数据, 假设初始化 data 为 1, 则打印1

const { menu, data} = useContext(Global) 
const [memo]
const test = useMemo(()=>{
	return menu.map(item=>{
		return (
			<span onclick={onClickSpan}>点击</span>
		)
	})
},[menu])
const onClickSpan = () =>{
	console.log(data)
}

B文件通过setData方法修改了data的值 给为2

const {data,setData} = useContext(Global)
const onChangeData = ()=>{
	setData('2')
}

这时候我们再去点击span 会发现打印的值还是1, data值并没有实时更新为2
这是因为useMemo缓存组件, 让span 的点击事件被缓存下来了导致获取的值还是旧值
解决方案: 只需把data加入useMemo的第二个参数即可

const test = useMemo(()=>{
	return menu.map(item=>{
		return (
			<span onclick={onClickSpan}>点击</span>
		)
	})
},[menu, data]) // 这里把data加入即可