反应本地存储阵列中的数据与asyncstorage没有返回

Question

我想建立一个午餐选择器应用程序，允许用户添加自己的菜单。我想用AsyncStorage用户数据保存到数组。然而，我的价值返回即使数组有没有价值。下面是我的代码。

    //Main screen
class HomeScreen extends React.Component {
  //initial
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
      myMenu: '????',
      menutext: '',
      randomArray: ['a', 'b', 'c'],
      visibility: false,
    };
  }

  _loadMenu = async () => {
     try{
       const loadMenu = await AsyncStorage.getItem("menuInStorage")
       const parsedLoadMenu = JSON.parse(loadMenu)
       const myReturn = [...this.state.randomArray, parsedLoadMenu]
       this.setState({randomArray: myReturn})

     }
     catch(err){
       alert(err)
     }

   }

  //get input from textinput field and add to array
  addMenu = newMenu => {
    //...
    this._saveMenu(this.state.randomArray)
  };






   _saveMenu = (saving) => {
     const saveMenu = AsyncStorage.setItem("menuInStorage", JSON.stringify(saving))
   }



  //control modal
  setModalVisibility(visible) {
    this.setState({visibility: visible});
  }


  //UI
  render() {
    return (
      <View style={styles.mainContainer}>

        <View style={[styles.container, {flexDirection: 'row', justifyContent: 'center'}]}>
          <TextInput
            style={{ height: 40, fontSize: 20, paddingLeft: 15, textAlign: 'left', width: 250, borderBottomColor: '#D1D1D1', borderBottomWidth: 1 }}
            placeholder=".."
            onChangeText={menutext => this.setState({ menutext })}
            value={this.state.menutext}
          />
          <Button
            title=".."
            onPress={() => this.addMenu(this.state.menutext)}
            buttonStyle={{width:100}}
            backgroundColor="#2E282A"
          />
        </View>


          <Text>{'\n'}</Text>
          <Button
            onPress={() => this.setModalVisibility(true)}
            title=".."
            buttonStyle={{width: 150}}
            backgroundColor="#2E282A"
          />
        </View>

        <Modal
          onRequestClose={() => this.setState({ visibility: false })}
          animationType={'slide'}
          transparent={false} 
          visible={this.state.visibility}
          >

          <View style={[styles.modalContainer, {marginBottom: 100}]}>
            <Text style={[styles.text, { fontWeight: 'bold', padding: 20, backgroundColor: '#9090DA', borderBottomColor: '#5C5C8B',
            borderBottomWidth: 1,}]}>
                {'<'}List will be here{'>'}
            </Text>
            <ScrollView style={{height: "94%"}}>
              <View style={styles.row}>{this.state.randomArray}</View>

            </ScrollView>
            <Button
                buttonStyle={{justifyContent: 'center', marginTop: 5}}
                backgroundColor="#2E282A"
                onPress={() => this.setModalVisibility(!this.state.visibility)}
                title="Close"
            />
          </View>
        </Modal>

      </View>
    );  
  }

}

应该工作的应用程序如何，当用户点击一个按钮，模式显示阵列称为“randomArray”的所有数据。用户添加自己的自定义文本后，应在randomArray的末尾添加。我想，当应用程序启动这个数据从磁盘保存到磁盘和负载。在这个时刻，我可以加载阵列的数据，但它不保存用户数据。我当前的代码返回任何内容。我需要你的帮助。谢谢。

Answer 1

它看起来像在_loadMenu的逻辑是在这条线略微不正确的：

const myReturn = [...this.state.randomArray, parsedLoadMenu]

如果我理解正确的话，你希望parsedLoadMenu为类型Array的值。该线之上基本上都会附加价值parsedLoadMenu存储在myReturn所得阵列 - 在你的代码的情况下，这将意味着myReturn的最后一个项目将是一个数组，这将是从我在你的代码看到不正确的。考虑更新该行如下所示：

/* 
Add ... before parsedLoadMenu to concatenate the two arrays in myReturn
*/
const myReturn = [...this.state.randomArray, ...parsedLoadMenu] 

通过添加...如图所示，这将导致两个阵列this.state.randomArray和parsedLoadMenu在myReturn一起被级联。这也将是值得检查从JSON.parse()的解析结果，以确保它在尝试此连接前的数组：

_loadMenu = async () => {
     try{
       const loadMenu = await AsyncStorage.getItem("menuInStorage")
       let parsedLoadMenu = JSON.parse(loadMenu)

       /* 
       Consider an additional check here to ensure the loaded data is of
       correct Array type before proceeding with concatenation
       */
       if(!Array.isArray(parsedLoadMenu)) {
           parsedLoadMenu = [];
       }

       /* Concatenate the two arrays and store result in component state */
       const myReturn = [...this.state.randomArray, ...parsedLoadMenu]
       this.setState({randomArray: myReturn})

     }
     catch(err){
       alert(err)
     }    
   }

此外，考虑修改addMenu逻辑，让你的就是菜单项的整个数组保存到AsyncStorage，而不是只新添加的菜单项，因为你正在做：

addMenu = (newMenu) => {

    /* 
    Persist current randomArray with newMenu item appended 
    */
    this._saveMenu([...this.state.randomArray, newMenu])
};

希望这可以帮助！