我正在React Native中构建一个跑步应用程序，我希望能够跟踪一周内每天的英里数。当state是一个对象时，我如何将每天的英里数保存到本地存储中？英里数是在TextInput中输入的，我希望在TouchableOpacity中使用onPress提交它们。另外，我如何从异步存储中检索当天的英里数？
const [miles, setMiles] = useState({
monday: 0,
tuesday: 0,
wednesday: 0,
thursday: 0,
friday: 0,
saturday: 0,
sunday: 0,
});
<View style={styles.weekDayContainer}>
<View style={styles.milesInput}>
<Text style={styles.weekDayText}>Monday</Text>
<TextInput style={styles.weekDayInput}
type="number"
placeholder="enter miles"
keyboardType="numeric"
value={miles.monday}
onChangeText={(value) => handleChange('monday',value)}
/>
<TouchableOpacity>
<Text>Submit</Text>
</TouchableOpacity>
</View>
<View style={styles.milesInput}>
<Text style={styles.weekDayText}>Tuesday</Text>
<TextInput style={styles.weekDayInput}
type="number"
placeholder="enter miles"
keyboardType="numeric"
value={miles.tuesday}
onChangeText={(value) => handleChange('tuesday', value)}
/>
<TouchableOpacity>
<Text>Submit</Text>
</TouchableOpacity>
</View>
<View style={styles.milesInput}>
<Text style={styles.weekDayText}>Wednesday</Text>
<TextInput style={styles.weekDayInput}
type="number"
placeholder="enter miles"
keyboardType="numeric"
value={miles.wednesday}
onChangeText={(value) => handleChange('wednesday', value)}
/>
<TouchableOpacity>
<Text>Submit</Text>
</TouchableOpacity>
</View>
<View style={styles.milesInput}>
<Text style={styles.weekDayText}>Thursday</Text>
<TextInput style={styles.weekDayInput}
type="number"
placeholder="enter miles"
keyboardType="numeric"
value={miles.thursday}
onChangeText={(value) => handleChange('thursday', value)}
/>
<TouchableOpacity>
<Text>Submit</Text>
</TouchableOpacity>
</View>
<View style={styles.milesInput}>
<Text style={styles.weekDayText}>Friday</Text>
<TextInput style={styles.weekDayInput}
type="number"
placeholder="enter miles"
keyboardType="numeric"
value={miles.friday}
onChangeText={(value) => handleChange('friday', value)}
/>
<TouchableOpacity>
<Text>Submit</Text>
</TouchableOpacity>
</View>
<View style={styles.milesInput}>
<Text style={styles.weekDayText}>Saturday</Text>
<TextInput style={styles.weekDayInput}
type="number"
placeholder="enter miles"
keyboardType="numeric"
value={miles.saturday}
onChangeText={(value) => handleChange('saturday', value)}
/>
<TouchableOpacity>
<Text>Submit</Text>
</TouchableOpacity>
</View>
<View style={styles.milesInput}>
<Text style={styles.weekDayText}>Sunday</Text>
<TextInput style={styles.weekDayInput}
type="number"
placeholder="enter miles"
keyboardType="numeric"
value={miles.sunday}
onChangeText={(value) => handleChange('sunday', value)}
/>
<TouchableOpacity>
<Text>Submit</Text>
</TouchableOpacity>
</View>
</View>
1条答案
按热度按时间hmae6n7t1#
使用
JSON.stringify/JSON.parse将对象设置到存储或从存储获取对象。异步存储只能存储字符串数据，因此为了存储对象数据，您需要首先将其序列化。对于可以序列化为JSON的数据，您可以在保存数据时使用JSON.stringify（），在加载数据时使用JSON.parse（）。
有关详细信息，请参见Usage。