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

希望这会有所帮助！

用asyncstorage反应本机存储的数组数据不返回任何内容

1 个答案: