Question

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

2021-08-05

427

javascript reactjs react-native react-hooks react-native-elements

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

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

当我像这样尝试时（见下文），会出现错误“TypeError：null 不是对象（评估‘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)

Answer 1

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

最好使用 useEffect 钩子：

const timerRef = useRef(null);

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

这样您就可以确定 timerRef.current 不是未定义的

Answer 2

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

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