这是我的代码:
export default function VideoPlayer() {
const videoPlayerRef = useRef(null);
const [status, setStatus] = useState({});
const [totalDuration, setTotalDuration] = useState(null);
return (
<View style={styles.container}>
<Video
ref={videoPlayerRef}
source={'https://samplelib.com/lib/preview/mp4/sample-5s.mp4'}
onLoad={status => setTotalDuration(() => status)}
/>
<Text style={styles.timestamp}>{totalDuration.durationMillis}</Text>
</View>
);
}
我希望从Video参数onLoad获取总视频时长。但是我得到了一个错误代码:
<Text style={styles.timestamp}>{totalDuration.durationMillis}</Text>
输出:Cannot read properties of null (reading 'durationMillis')
。你知道那里出了什么问题吗
2条答案
按热度按时间bwitn5fc1#
totalDuration状态初始化为空值,您应该处理对象可能未定义的情况。
ie3xauqp2#
代码中的问题是您试图在设置totalDuration之前访问它的durationMillis属性。最初,totalDuration被设置为null,并且它只在Video组件的onLoad回调中更新。由于onLoad回调是异步的,所以更新totalDuration需要一些时间,在此期间,您将尝试访问其属性。
若要解决此问题,可以添加条件呈现检查,以仅在totalDuration.durationMillis可用时才显示它。下面是代码的更新版本:
在这个更新的代码中,我在呈现组件之前添加了对totalDuration的检查。只有当totalDuration具有值时,才会呈现组件,从而防止出现您遇到的错误。此外,我还更改了Video组件的源属性,以使用带有uri属性的对象而不是字符串。
确保处理其他可能的错误场景,并进一步定制代码以满足您的特定需求。