如何在 React Native 中设置复选框以使用 anyc 存储进行操作

Question

我正在组合一个复选框，它将数据推送到本机反应中的异步存储，但我无法让数据保持不变。我已经设置了这个功能，大概是在选中复选框时将数据推送到存储，然后在取消选中时推送数据。下面是代码，似乎取消选中该框不会坚持。当我再次打开应用程序时，该框仍处于选中状态，我可能在这里做错了什么？假设现在存储的本地项目是 true 并且我想在取消选中时将其设为 false。为了确认没有任何变化，我添加了一个按钮来调用数据。

    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)}
                                />

Answer 1

将 _storeData 调用更新为：

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

和你的函数体：

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

如何在 React Native 中设置复选框以使用 anyc 存储进行操作

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

javascript

local-storage

react-native

asyncstorage