React Native状态持久化：刷新后保留随机视频状态

当然可以用AsyncStorage实现状态持久化，下面是适配你代码的具体修改方案：

1. 先处理依赖（React Native环境） #

如果是React Native项目，需要安装官方维护的AsyncStorage包：

npm install @react-native-async-storage/async-storage
# 或用yarn
yarn add @react-native-async-storage/async-storage

2. 修改代码实现持久化 #

核心改动是：组件挂载时从存储读取历史数据，更新视频状态的同时把数据存入存储，彻底解决刷新后状态重置的问题。

修改后的完整代码：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';

// ...你的allwaza数据定义及其他代码

const YourComponent = () => {
  const [newvideo, setNewVideo] = useState({
    title: '',
    url: '',
    thumbnail: ""
  });
  const [time, setTime] = useState(new Date());

  // 组件加载时读取存储的视频数据
  useEffect(() => {
    const loadSavedVideo = async () => {
      try {
        const savedData = await AsyncStorage.getItem('savedVideo');
        if (savedData) {
          setNewVideo(JSON.parse(savedData));
        } else {
          // 首次加载无存储数据时，直接生成随机视频并保存
          handleRandomVideo();
        }
      } catch (err) {
        console.error('读取存储失败:', err);
      }
    };
    loadSavedVideo();
  }, []);

  const handleRandomVideo = async () => {
    const randomIndex = Math.floor(Math.random() * allwaza.length);
    const randomItem = allwaza[randomIndex];
    const newVideoData = {    
      title: randomItem.title,
      url: randomItem.url,
      thumbnail: randomItem.thumbnail
    };
    // 更新状态+存入存储
    setNewVideo(newVideoData);
    try {
      await AsyncStorage.setItem('savedVideo', JSON.stringify(newVideoData));
    } catch (err) {
      console.error('存储视频数据失败:', err);
    }
  };

  useEffect(() => {   
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    if (time.getHours() === 0 && time.getMinutes() === 0 && time.getSeconds() === 0) {
      console.log("It fired: ", time.toLocaleTimeString());   
      handleRandomVideo();
    }
  }, [time]);

  // ...你的组件渲染逻辑
};

export default YourComponent;

额外说明 #

• 如果是Web环境，直接把AsyncStorage换成localStorage即可，逻辑完全一致（localStorage.getItem/localStorage.setItem无需异步处理）
• 午夜自动切换视频时，新数据会自动存入存储，刷新页面后会读取历史数据，不会回到初始空值
• 首次加载无存储数据时，会自动生成随机视频并保存，避免页面初始状态为空

内容的提问来源于stack exchange，提问作者LOTUSMS