索引1处的绑定值为null，从react-native中的asyncstorage获取数据

Question

我正在尝试生成按钮，其中包含来自多个数组的数据。

这些数组之一是动态的，它是在构造函数（）上生成的。

问题是。 当我尝试导航到屏幕时，收到一条错误消息，提示“索引1的绑定值为null”。 该错误并不指向代码中的任何行，而是表示该问题与sqlite和asyncstorage有关。

我不确定为什么会发生这种情况，但可能与generateData状态未正确初始化有关。

我不知道该怎么做，我们将不胜感激。

这是代码：

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

但是使用包装AsyncStorage的库时出现了相同的错误。 它称为react-native-simple-store。 问题是我试图使用尚未准备就绪的变量（它为null / undefined）从存储中获取数据。 此变量仅在渲染后的一段时间后准备就绪。 所以我要做的就是添加一个if条件，如果它的null不做任何事情，当状态改变并且组件重新渲染时，变量现在准备就绪，因此它将进入if语句并访问存储。

Answer 2

首先，您应该import {AsyncStorage} from 'react-native'

那么你必须定义任何唯一的键

const ASYNC_STORAGE_COMMENTS_KEY = 'ANYTHING_UNIQUE_STRING'

在调用AsyncStorage.setItem您的第一个参数应该是ASYNC_STORAGE_COMMENTS_KEY ，第二个参数应该是您使用stringify的json数据

例如AsyncStorage.setItem(ASYNC_STORAGE_COMMENTS_KEY, JSON.stringify(data));

和获取

const your_var = await AsyncStorage.getItem(ASYNC_STORAGE_COMMENTS_KEY);

Answer 3

我有这个问题，这是因为我已经将空值发送到AsyncStorage.getItem()并且在我更改它时。 它解决了。

Answer 4

当您在启动/注册应用之前尝试使用AsyncStorage时，可能会发生此问题。 如果是这种情况，请尝试将调用AsyncStorage的代码移动到componenDidMount / useEffect挂钩（您可以在执行此逻辑时呈现加载/空视图）。