React Native AsyncStorage加载异常求助：旧值丢失仅显示新值

问题根源 #

当前代码使用AsyncStorage.setItem直接覆盖单个键值，每次保存都会替换旧数据，仅能保留最新的一条记录，无法存储历史数据集合。

解决方案：改用数组存储历史记录 #

将星级评分与歌曲选择作为对象存入数组，每次保存时追加新条目，加载时读取完整数组并展示所有历史数据。

1. 初始化组件状态

在组件的state中添加存储历史记录的数组，同时保留当前选择的星级和歌曲：

state = {
  starValue: '',
  songValue: '',
  historyRecords: [] // 存储历史记录的数组
};

2. 修改保存逻辑

先读取已有历史数据，将当前选择的条目加入数组，再序列化后存入AsyncStorage：

onSave = async () => {
  const { starValue, songValue, historyRecords } = this.state;
  
  // 跳过空值保存
  if (!starValue || !songValue) {
    Alert.alert('提示', '请选择星级和歌曲');
    return;
  }

  try {
    // 创建新记录
    const newRecord = {
      star: starValue,
      song: songValue,
      timestamp: new Date().toLocaleString() // 可选：添加时间戳区分记录
    };
    
    // 合并新记录到历史数组
    const updatedHistory = [...historyRecords, newRecord];
    
    // 序列化并存储
    await AsyncStorage.setItem(keys.historyKey, JSON.stringify(updatedHistory));
    
    // 更新状态并清空当前选择
    this.setState({
      historyRecords: updatedHistory,
      starValue: '',
      songValue: ''
    });
    
    Alert.alert('保存成功', '已添加到历史记录');
  } catch (error) {
    Alert.alert('错误', '保存数据时出现问题');
  }
};

3. 修改加载逻辑

读取存储的数组字符串，解析后更新状态：

onLoad = async () => {
  try {
    const storedHistory = await AsyncStorage.getItem(keys.historyKey);
    // 解析数据，空值时返回空数组
    const historyRecords = storedHistory ? JSON.parse(storedHistory) : [];
    
    this.setState({ historyRecords });
  } catch (error) {
    Alert.alert('错误', '加载数据时出现问题');
  }
};

4. 更新渲染逻辑，展示所有历史记录

遍历历史数组，逐条展示每条记录的星级和歌曲：

render() {
  const { starValue, songValue, historyRecords } = this.state;
  
  return (
    <View style={styles.container}>
      {/* 历史记录展示 */}
      <Text style={styles.sectionTitle}>历史评分记录</Text>
      {historyRecords.length === 0 ? (
        <Text style={styles.emptyText}>暂无历史记录</Text>
      ) : (
        historyRecords.map((record, index) => (
          <View key={index} style={styles.recordItem}>
            <Text>
              {record.timestamp} - {record.star} | {record.song}
            </Text>
          </View>
        ))
      )}

      {/* 选择器区域 */}
      <View style={styles.pickerContainer}>
        <Picker 
          label='星级评分' 
          selectedValue={starValue}
          onValueChange={itemValue => this.setState({ starValue: itemValue })}
          style={{ height: 50, width: 150 }}
        >
          <Picker.Item label='选择星级' value='' />
          <Picker.Item label='1' value='* ' />
          <Picker.Item label='2' value='** ' />
          <Picker.Item label='3' value='*** ' />
          <Picker.Item label='4' value='**** ' />
          <Picker.Item label='5' value='***** ' />
        </Picker>

        <Picker 
          label='歌曲选择' 
          selectedValue={songValue}
          onValueChange={itemValue => this.setState({ songValue: itemValue })}
          style={{ height: 50, width: 150 }}
        >
          <Picker.Item label='选择歌曲' value='' />
          <Picker.Item label='People Watching' value='People Watching ' />
          <Picker.Item label='Hunted By A Freak' value='Hunted By a Freak ' />
          <Picker.Item label='Nervous Tic..' value='Nervous Tic ...' />
        </Picker>
      </View>

      {/* 操作按钮 */}
      <View style={styles.buttonContainer}>
        <Button title='保存记录' onPress={this.onSave} />
        <Button title='加载记录' onPress={this.onLoad} />
      </View>
    </View>
  );
}

5. 补充样式示例（可选）

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    marginTop: 50
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10
  },
  recordItem: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    marginBottom: 5
  },
  emptyText: {
    color: '#999',
    marginBottom: 20
  },
  pickerContainer: {
    marginVertical: 20,
    gap: 10
  },
  buttonContainer: {
    gap: 10
  }
});

关键说明 #

• 使用JSON.stringify和JSON.parse处理数组的序列化/反序列化，因为AsyncStorage仅支持存储字符串类型。
• 添加时间戳可以让历史记录更清晰，便于区分不同时间的条目。
• 保存前校验空值，避免存入无效记录。

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