Javascript 如何在每天结束时自动将状态设置为零？

我正在构建水提醒应用程序，并在应用程序状态和存储中存储每日消耗的水量

我想在每天结束时自动将其设置为零

正如你在下面看到的。我在醉酒状态下存储消耗的水量，并通过将目标除以醉酒来计算进度

我正在从AsyncStorage获取目标并将其设置为state

export default class HomeScreen extends React.Component {

  state = {
    progress: 0, 
    drunk: 0, // this is the state I want to set to zero
    goal: 0
  };

  componentDidMount() {

    this.willFocusSubscription = this.props.navigation.addListener(
      "willFocus",
      payload => {
        console.debug("willFocus", payload);
        //retrieve items from AsyncStorage
        _retrieveData = async key => {
          try {
            const sliderValue = await AsyncStorage.getItem("sliderValue");
            const drunk = await AsyncStorage.getItem("drunk");
            const progress = await AsyncStorage.getItem("progress");
            if (drunk !== null) {
              // We have data!! and set them to states
              this.setState({
                goal: parseInt(sliderValue),
                drunk: parseInt(drunk),
                progress: parseFloat(progress)
              });
            }
          } catch (error) {
            console.log(error.message);
          }
        };
        _retrieveData();
      }
    );
  }

  componentWillUnmount() {
    if (this.willFocusSubscription) {
      this.willFocusSubscription.remove();
    }
  }

  //function to drink water, set state and setItem Async
  drinkWater = () => {
    this.setState(prevState => ({
      drunk: prevState.drunk + 200,
      progress: (prevState.drunk + 200) / this.state.goal
    }));

    let progress = this.state.progress;
    let drunk = this.state.drunk;

    _storeData = async () => {
      try {
        await AsyncStorage.setItem("progress", progress.toString());
        await AsyncStorage.setItem("drunk", drunk.toString());
      } catch (error) {
        console.log(error.message);
      }
    };

    _storeData();
  };

---

基本上，你想做一些遵循这种模式的事情

应用程序发布 检查存储的日期并将其与当前日期进行比较。如果未存储日期，请存储该日期。否则，如果当前日期大于存储的日期，请重置值

背景到前景 当应用程序从后台转到前台，甚至返回主屏幕时，请检查存储的日期并将其与当前日期进行比较。如果当前日期大于存储的日期，请重置值

时间 在处理时间问题时，时刻是一个很好的工具。它经过了很好的测试。你可以在这里了解更多。您可以随时使用npm i安装它

代码示例 我们正在使用AppState跟踪应用程序是在后台还是在前台。由于该应用程序可能会在日期更改时运行，我们需要检查它何时进入前台。 我们需要检查组件何时挂载，因为它将在应用程序启动时挂载。因此，该应用程序以前可能已经关闭。 忽略保存日期时的时间，因为我们只想比较日期。 代码如下：

import React from 'react';
import { View, StyleSheet, AsyncStorage, AppState } from 'react-native';
import moment from 'moment';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      appState: AppState.currentState,  // set the currentState as the appState
    }
  }
  
  async componentDidMount () {
    // Set the listener
    AppState.addEventListener('change', this._handleAppStateChange);
    // perform check when the component mounts
    await this.checkDate();
  }
  
  componentWillUnmount () {
    // remove the listener
    AppState.removeEventListener('change', this._handleAppStateChange);
  }
  
  _handleAppStateChange = async (nextAppState) => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      // app has come to the foreground
      // perform checks etc here
      await this.checkDate();
    }
    // update the appState
    this.setState({ appState: nextAppState });
  }

  checkDate = async () => {
    // create a string with the current date
    let currentDateString = moment('YYYY-MM-DD') 
    
    // get the value from storage
    let savedDateString = await AsyncStorage.getItem('storedDate');
    if (savedDateString) {

      if (moment(currentDateString).isAfter(savedDateString)) {
        // this is where you put the code that resets everything
        // clear the values that you have previously saved
        // remember to save the new date
        try {
          await AsyncStorage.setItem('storedDate', currentDateString)
        } catch (err) {
        }
      } else {
        // don't do anything as the time hasn't changed
        // so we could really get rid of this else statement
      }
    } else {
      // save the time as this is the first time the app has launched
      // do any other initial setup here
        try {
          await AsyncStorage.setItem('storedDate', currentDateString)
        } catch (err) {
        }
    }
  }

  render() {
    return (
      <View style={styles.container}>
      </View>
    )
  }
}

---

代码应该让您了解如何实现它。

如果没有更多细节，就无法给出真正的答案，但一个一般策略可能是：将最后修改的时间戳与数据一起存储，并在加载时检查时间戳是否来自前一天，如果是，则重置数据。谢谢daniel。我在问题中添加了更多细节和截图。但是你的解决方案可以帮我。Thanks@sinan屏幕截图没有真正的帮助。它只是给我们展示了一幅美丽的图画。我认为你应该编辑你的问题，并提供一些关于如何存储数据的信息。你在使用什么，异步存储，领域数据库，Redux，这样人们就能够提出解决方案。谢谢你的反馈@Andrew。我已经添加了我的代码