The bind value at index 1 is null, getting data from from asyncstorage in react-native

Question

I am triyng to generate buttons, with data from multiple arrays.

One of these arrays is dynamic, and its getting generated at constructor().

Problem is. When i try to navigate to screen, i get an error message saying " the bind value at index 1 is null ". The error does not point to any line inside my code, instead, it says the issue have something to do with sqlite and asyncstorage.

Im not sure why this is happening, but maybe it have something to do with the generatedData state not being initialized correctly.

I dont know what to do to solve this, any help would be appreciatted.

Here is the code:

import React, { Component } from 'react';

import {
  Text,
  View,
  TouchableOpacity,
} from 'react-native';

class DataApp extends Component {
  constructor() {
    super()
    this.state = {
      dataLocalIds: [
        "data1Data",
        "data2Data",
        "data3Data",
        "data4Data",
        "data5Data",
        "data6Data"
      ],
      dataLabel: [
        "[ data 1 ]",
        "[ data 2 ]",
        "[ data 3 ]",
        "[ data 4 ]",
        "[ data 5 ]",
        "[ data 6 ]",
      ],
      generatedData: [],
    }

    this.state.dataLocalIds.map((value, index) => {
      this.data = this.getDatas(value);
    })
  }

  async getDatas(value) {
    try {
      const value = await AsyncStorage.getItem(value).then(val => {
        let jsonInit = {};
        jsonInit[value] = value;
        let newArray = this.state.generatedData;
        newArray.push(jsonInit);
        this.setState(generatedData: newArray);
        return JSON.parse(val)
      });
      return value
    } catch (err) {
      throw err
    }
  }

  renderScreen = () => {
      var myData =  JSON.parse(this.state.generatedData);
      return (
          {this.state.dataLabel.map((item, index) => {
            return(
              <TouchableOpacity onPress={}>
                <Text>{this.state.generatedData[index] === "{}" ? item : "foo: " + generatedData.foo + " / bar: " + generatedData.bar}</Text>
              </TouchableOpacity>
              )
            })}
      );
  }

  render() {
    return (
      this.renderScreen()
    );
  }
}
export default DataApp;

Answer 1

i have this problem and it was for that i have sended null value to AsyncStorage.getItem() and when i changed it. it solved.

Answer 2

This problem can occur when you are trying to use AsyncStorage before the app has been started/registered.

If it is the case, try moving the code that calls AsyncStorage to a componenDidMount/useEffecthook (you can render a loading/empty view while this logic is being executed).