React Native，成功设置状态但想同时保存在 asyncStorage答案

【问题标题】：React Native, successfully setting state but wanting to save in asyncStorage at same timeReact Native，成功设置状态但想同时保存在 asyncStorage
【发布时间】：2019-10-14 03:19:14
【问题描述】：

我有一个用于跟踪健康统计数据的 react 本机应用程序模块。这个例子是针对权重的，但是当仪表板加载时，会有一个带有按钮的空组件来触发编辑器模式。这会提供一个 textInput ，用户可以在其中输入当天的体重，保存后会将数字保存到该值的状态，现在它会显示在仪表板上。

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

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

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

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>
    ) ;
  }
}

【问题讨论】：

标签： javascript android reactjs react-native mobile

【解决方案1】：

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

重量容器更新后，更新日期变量，使其不会在同一天再次询问重量或如果应用程序一直在运行，则在每天 12 点重置权重容器，不要出现任何循环

【讨论】：