在 asyncStorage 中存储数组状态对象

Posted 2023-02-22

【中文标题】在 asyncStorage 中存储数组状态对象

【英文标题】：storing array state objects in asyncStorage

【发布时间】：2020-03-25 15:23:57

【问题描述】：

我想使用异步存储来存储数组状态。但每次我重新加载应用程序时，它都会出现空白。下面是一个示例代码，为了更清楚，我只展示了函数。

    componentDidMount() 
      this.getDataSync();
    


  getDataSync = async () => 
    try 
      const list = await AsyncStorage.getItem(LIST_STORAGE_KEY);

      const parsedList = JSON.parse(list);
      const obj = Object.keys(parsedList);

      this.setState( isDataReady: true, list: obj || [] );
     catch (e) 
      Alert.alert('Failed to load list.');
    
  

  handleAdd() 
    const  firstname, lastname, email, phone = this.state;
    const ID = uuid();
    const newItemObject = 
        key: ID,
        firstname: firstname,
        lastname: lastname,
        email: email,
        phone: phone,
        image: null,
    ;

    this.setState(prevState => (
      list: [...prevState.list, newItemObject]
    ));

    this.saveItems(this.state.list);

  

  saveItems = list => 
    AsyncStorage.setItem(LIST_STORAGE_KEY, JSON.stringify(list));
  ;

【问题讨论】：

尝试记录一个列表和 obj 并告诉我你得到了什么

【参考方案1】：

您不是在保存列表，而是从列表中获取密钥。 const obj = Object.keys(parsedList); 您正在将数组索引保存到状态。

getDataSync = async () => 
  try 
    const list = await AsyncStorage.getItem(LIST_STORAGE_KEY);

    const parsedList = JSON.parse(list);

  this.setState( 
     isDataReady: true, 
     list: Array.isArray(parsedList) && parsedList.length && parsedList || [] 
  );

  catch (e) 
    Alert.alert('Failed to load list.');
  

还将saveItems 作为回调传递以保存正确的数据。

this.setState(prevState => (
  list: [...prevState.list, newItemObject]
), () => this.saveItems(this.state.list));

【参考方案2】：

.setState()方法是may be asynchronous，所以设置状态的结果，设置后不能立即使用。如果你想使用设置状态的结果，你应该使用回调（第二个参数），它是在实际设置状态后调用的：

this.setState(
  prevState => (
    list: [...prevState.list, newItemObject]
  ),
  () => this.saveItems(this.state.list)
);

【讨论】：

它不起作用，之前尝试过，现在尝试过，仍然返回一个空数组。

获取数组[“0”]