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

Question

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

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

当我这样尝试时（见下文），会出现错误“TypeError: null is not an object (evaluating '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();
                    }}
                />

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

react-native-element-timer useRef object is null

javascript

reactjs

react-native

react-hooks

react-native-elements