react-native-element-timer useRef 对象为空

Posted 2023-02-25

【中文标题】react-native-element-timer useRef 对象为空

【英文标题】：react-native-element-timer useRef object is null

【发布时间】：2021-08-05 15:21:24

【问题描述】：

我正在使用 react-native-element-timer (https://www.npmjs.com/package/react-native-element-timer)，但 useRef 挂钩有问题。

timerRef 的引用是通过“Timer”元素的渲染设置的，但我希望计时器在调用“Stopwatch”函数时直接启动，而 不 使用 onButtonClick。所以我需要在渲染之前引用那个 Timer。

当我这样尝试（见下文）时，会出现错误“TypeError: null is not an object (evalating 'timerRef.current.start')”。

export default function Stopwatch(item, process) 
    import React,  useRef  from 'react';
    import  Timer  from 'react-native-element-timer';


    const timerRef = useRef(null);

    //timerRef.current.start(); <--- this should be called with function Stopwatch

    return (
        <View >
            <Timer
                ref=timerRef

                onTimes=e =>  
                onEnd=e =>  
            />
        </View>
    );

感谢任何帮助！谢谢

################

更新：

有

const timerRef = useRef(new Date) 

我收到另一个错误：

TypeError: timerRef.current.start is not a function. (In 'timerRef.current.start()', 'timerRef.current.start' is undefined)

【问题讨论】：

const timerRef = useRef(new Date)

感谢您的回复。不幸的是几乎相同的错误：TypeError: timerRef.current.start is not a function。 （在'timerRef.current.start()'中，'timerRef.current.start'未定义）

需要在渲染之前引用该 。这可能吗？

【参考方案1】：

发生这种情况是因为您在组件主体中调用 timerRef.current.start();（我们不知道 React 何时会调用此行代码，可能在解析 ref 之前）。

更好地使用useEffect钩子：

const timerRef = useRef(null);

useEffect(() => 
   if(timerRef.current) timerRef.current.start();
, [])

这样你就确定timerRef.current不是未定义的

【讨论】：

很高兴为您提供帮助。有一个很好的编码 =)

【参考方案2】：

调用新按钮timerRef.current.start()

                <Button
                    style=styles.button
                    title='Start'
                    onPress=() => 
                        timerRef.current.start();
                    
                />