React，功能组件使用在定义之前使用的变量，循环依赖
React，功能组件使用在定义之前使用的变量，循环依赖
提问于 2020-09-02 18:19:54
我有一个关于React功能组件、React.useCallback和循环依赖的问题。
请参阅以下示例代码
import React from 'react'
export const FooBar = (props) => {
const finish = React.useCallback((done) => {
document.removeEventListener('mousemove', onMouseMove)
document.removeEventListener('mouseup', onMouseUp)
}, [onMouseMove, onMouseUp]) // here i get a problem as the variables are not defined yet
const onMouseUp = React.useCallback((e) => {
finish()
}, [finish])
const onMouseMove = React.useCallback((e) => {
// update some stuff
}, [])
const onMouseDown = React.useCallback((e) => {
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('mouseup', onMouseUp)
}, [onMouseMove, onMouseUp])
React.useEffect(() => {
if (!props.map) {
return
}
const canvas = props.map.getCanvas()
canvas.addEventListener('mousedown', onMouseDown, true)
return () => {
canvas.removeEventListener('mousedown', onMouseDown, true)
}
}, [onMouseDown, props.map])
return null
}我的问题是，我不能移动代码，因为变量在deps-array中使用之前都已经定义好了。有什么方法可以用一个功能组件来解决这个问题？
回答 1
Stack Overflow用户
发布于 2020-09-02 18:55:41
您可以将这三个都移动到一个有记忆的钩子中：
const { finish, onMouseUp, onMouseDown } = useMemo(() => {
function finish() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
function onMouseUp() { finish(); }
function onMouseDown() { finish(); }
return { finish, onMouseUp, onMouseDown };
}, []);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63703488
复制相关文章
相似问题
腾讯云开发者
