javascript - React Native，成功设置状态但想同时保存在asyncStorage中

Question

我有一个用于跟踪健康统计信息的 React native 应用程序模块。这个例子是关于重量的，但是当仪表板加载时，有一个空组件，带有一个按钮来触发编辑器模式。这提供了一个 textInput，用户可以在其中输入他们当天的体重，并且在保存时将该数字保存到该值的状态，现在它显示在仪表板上。

这完全符合预期，但我还想将其与当前日期同时保存在 asyncStorage 中。如果当前日期与它的存储值匹配，我想加载这些值的状态，但要保存它一整天。

基本上，如果用户在星期一醒来并记录他们的体重，我希望它整天都显示在应用程序中，但是当他们星期二打开它时，它应该再次为空，以便他们在那天输入，然后值应在星期二等整天保持不变。

我需要做什么才能实现这一目标？

import React, { Component } from 'react';
import { StyleSheet, Text,  View, Dimensions, Button, ScrollView, TouchableOpacity, TextInput, Alert} from 'react-native';
import { Pedometer } from "expo-sensors";
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart
} from "react-native-chart-kit";
import PedometerChart from './PedometerChart';
import Icon from '@expo/vector-icons/Ionicons';
import MatIcon from '@expo/vector-icons/MaterialCommunityIcons';
import NumericInput from 'react-native-numeric-input';
import Modal from 'react-native-modal';
import moment from 'moment';



export default class Dashboard extends Component{

    state = {
    weight:'',
    currentDate: new Date(),
    markedDate: moment(new Date()).format("YYYY-MM-DD")
  };

  render() {

    const today = this.state.currentDate;
    const day = moment(today).format("dddd");
    const date = moment(today).format("MMMM D, YYYY");

    return(
      <ScrollView>
      <View style={styles.container}>

      <View style={styles.mainContainer}>
        <View style={styles.widgetContainer}>
            <MatIcon  name="scale-bathroom" size={50} />
            <Text style={styles.titleText}>Weight</Text>
        </View>
        <View style={styles.widgetContainer}>
            <Text>
              <Text style={styles.textUnderlines}>
              {this.state.weight}
              </Text>
              <Text style={styles.recordsTypes}>
              lb
              </Text>
            </Text>
            <TouchableOpacity 
                style={styles.recordButton} 
                onPress={this.toggleWeightModal}
            >
            <Text style={styles.recordText}>Record</Text>
            </TouchableOpacity>
        </View>
      </View>

      <Modal 
          isVisible={this.state.isWeightModalVisible}
          backdropOpacity={0.7}
          onBackdropPress={() => this.setState({ isWeightModalVisible: false })}
      >
        <View style={{ flex: 1 }}>
          <View style={styles.recordingModals}>
          <Text style={styles.titleText}>Weight for {date}</Text>
          <TextInput 
              value={this.state.weight}
              onChangeText={(weight) => this.setState({ weight })}
              keyboardType="numeric" 
              underlineColorAndroid="#000" 
              style={styles.modalInput} 
              placeholder="lbs"/>
          <TouchableOpacity style={styles.recordButtonModal} onPress={this.toggleWeightModal}>
          <Text style={styles.recordText}>Save Entry</Text>
          </TouchableOpacity>
          </View>
        </View>
      </Modal>
      </ScrollView>
    ) ;
  }
}

Answer 1

可以获取今天的日期并将其存储在变量中。如果日期不相同，则比较该变量和来自状态(this.state.today)的日期，空重量容器。

1. 当重量容器更新时，更新日期变量，这样它就不会在同一天再次询问重量或如果应用程序一直运行，则在每天晚上 12 点重置重量容器，没有任何循环