简体   繁体   English

如何设置复选框以在本机反应中使用 anyc 存储

[英]How to set a checkbox to operate with anyc storage in react native

I am putting together a check box that will push data to async storage in react native but am having trouble getting the data to stick.我正在组合一个复选框,该复选框会将数据推送到本机反应中的异步存储,但无法让数据保持不变。 I've set up the function presumably to push data to storage when the box is checked and then when it is unchecked.我已经设置了该功能,大概是在选中该框时将数据推送到存储,然后在取消选中它时。 Below is the code, it seems unchecking the box won't stick.下面是代码,似乎取消选中该框不会粘住。 When I open the app again the box is still checked, what might I be doing wrong here?当我再次打开应用程序时,该框仍处于选中状态,我在这里做错了什么? Assume that as of right now the local item stored is true and I want to make it false when I uncheck.假设现在存储的本地项目为true ,我想在取消选中时将其设为假。 To confirm nothing is changing I have added a button to call data.为了确认没有任何变化,我添加了一个按钮来调用数据。

    const STORAGE_KEY = '@save_enableauto'
        state={
            enableAuto:false
        }

      _storeData = async enableAuto => {
            let x = enableAuto;
            console.log('setting auto messages to: ', !x);
            //send check box to state
            this.setState({ enableAuto: !x });

            try {

              if(x) {
                await AsyncStorage.setItem(STORAGE_KEY, 'true')
                alert('Data successfully saved!')
              } else {
                await AsyncStorage.setItem(STORAGE_KEY, 'false')
              }

            } catch (e) {
                console.log(e)
              alert('Failed to save name.')
            }
          }

        _retrieveData = async () => {
            try {
              const enableAuto = await AsyncStorage.getItem(STORAGE_KEY);
              if (enableAuto !== null) {
                // We have data!!
                console.log('receiving from local storage: ',enableAuto);
                this.setState({ enableAuto:eval(enableAuto) });
              }
            } catch (error) {
                alert('failed to load previous settings.')
              // Error retrieving data
            }
        };

        componentDidMount() {
            this._retrieveData()
          }


    ....

<Button title={'call Data'} onPress={() => this._retrieveData()}/>
    <CheckBox
                                    value={this.state.enableAuto}
                                    onValueChange={() => this._storeData(this.state.enableAuto)}
                                />

update _storeData call to:将 _storeData 调用更新为:

<CheckBox value={this.state.enableAuto}
               onValueChange={() => this._storeData(!this.state.enableAuto)}
     />

and your function body to :和你的函数体:

_storeData = async enableAuto => {
        let x = enableAuto;
        console.log('setting auto messages to: ', x);
        //send check box to state
        this.setState({ enableAuto: x });
        ...
    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM