react-native - React Native：在 react-native-reanimated 中通过 useRef 渲染的钩子比之前的渲染更多

Question

在我的 RN 0.62.2 应用程序中，动画值的声明更改为 use 后出现错误useRef。没有错误的代码是：

import Animated from 'react-native-reanimated';
import {Value} from Animated;

const dragX = new Value(0);

由于它是功能组件，因此我正在关注添加的文档：react-native-reanimateduseRef

const dragX = useRef(() => new Value(0)).current;

更改后，上面的行会引发错误：

尝试了以下，问题是一样的：

const dragX = useRef(new Value(0));

试过useValue了，错误是一样的。除了上面链接的文档之外，没有太多关于如何使用useRef的信息。react-native-reanimated

更新：

代码太长太乱。该方法displayImg是在其父组件定义的区域中显示单个图像。如果父组件中有多个图像（dateLen > 1），则显示的每个图像displayImg都可以拖动并且需要动画。useRef用于在每次重新渲染后保持状态。

function displayImg (img_source, width, ht, index, modalWidth, modalHt, dataLen, sortFn) {
        const aniIndex= new Value(index);
        const aniGridPR = new Value(gridPerRow);
        const dragX = useRef(new Value(0)).current;  //<<==this line causes error
        const dragY = new Value(0);
        const offsetX = new Value(0);
        const offsetY = new Value(0);
        const state = new Value(-1);
        const scale = new Value(1);
    var gridPerRow;
    console.log("image width : ", width);
    console.log("image ht : ", ht);
    if (dataLen <= 4 && dataLen > 1) {
        gridPerRow = 2;
    } else if (dataLen > 4) {
        gridPerRow = 3;
    } else {
        gridPerRow = 1;
    };
    
            
    function onUp ([x, y, indx, gridPR]) {
        console.log("In on Up");
    };
            
    
    if (img_source && img_source!==[] && img_source!=={}) {
        if (dataLen == 1) {
            const scale = new Value(1);
            function onGestureStateChange() {

            };
            /* const onGestureStateChange = event([
                //{nativeEvent:set(nativeEvent.scale, scale)},
            ]); */
            let scaleStyle = {
                transform:[
                    { perspective: 500 },
                    {
                        scale :  scale
                    }
                ]
            };
            return (
                <><PinchGestureHandler onHandlerStateChange={onGestureStateChange}>
                    <Animated.View style={scaleStyle}>
                    <GridImage
                        img_source={img_source}
                        width={width}
                        ht={ht}
                        index={index}
                        modalWidth={modalWidth}
                        modalHt={modalHt}
                    />
                    
                    {/* <DeleteButton index={index} /> */}
                    <ModalImage
                        img_source={img_source}
                        modalWidth={modalWidth}
                        modalHt={modalHt}
                        index={index}
                    />
                    </Animated.View>
                    </PinchGestureHandler>
                </>
                );
        } else {
            console.log("ani code");
            
            const addX = add(offsetX, dragX);
            const addY = add(offsetY, dragY);
            const transX = cond(eq(state, State.ACTIVE), addX);  //set(offsetX, addX)
            const transY = cond(eq(state, State.ACTIVE), addY, 
                                    cond(eq(state, State.END), 
                                        cond(or(greaterOrEq(abs(divide(dragX,new Value(width))), new Value(0.3)), greaterOrEq(abs(divide(dragY,new Value(ht))), new Value(0.3))), 
                                            call([addX, addY, aniIndex, aniGridPR], onUp))
                                        )
                                    );
                                    //, [ set(dragY, new Value(0)), set(dragX, new Value(0))]
            const handleGesture = event([
                {
                  nativeEvent: {
                    translationX: dragX,
                    translationY: dragY,
                    state,
                  },
                }, 
              ]);
            
            let aniStyle = {
                transform:[
                    { translateX : transX },
                    { translateY : transY },
                    
                ]
            };
            
            return (
                <>
                  
                    <PanGestureHandler 
                        onGestureEvent={handleGesture} 
                        onHandlerStateChange={handleGesture}
                        minPointers={1}
                        maxPointers={1}>
                        <Animated.View style={[aniStyle ]}>
                        <GridImage
                            img_source={img_source}
                            width={width}
                            ht={ht}
                            index={index}
                        />
                        </Animated.View>
                    </PanGestureHandler>
            
                {/* <DeleteButton index={index} /> */}
                <ModalImage
                    img_source={img_source}
                    modalWidth={modalWidth}
                    modalHt={modalHt}
                    index={index}
            />
                
                </>
                );
        };
        
    } else {
        return null;
    };
    
};