索引为1的绑定值为空，在React Native中从AsyncStorage获取数据。

Question

我正在尝试生成按钮，使用来自多个数组的数据。其中一个数组是动态的，并在constructor（）中生成。

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

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

我不知道该怎么做才能解决这个问题，任何帮助都将不胜感激。

以下是代码：

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;

- MacFlyer

---

你是如何解决它的？ - Narendra Singh

Answer 1

我遇到了一个问题，是因为我将 null 值传递给了 AsyncStorage.getItem() 方法，当我将其更改后，问题得到了解决。

- Mahdi Aslami Khavari

Answer 2

当你尝试在应用程序开始/注册之前使用AsyncStorage时可能会出现此问题。

如果是这种情况，请尝试将调用AsyncStorage的代码移动到componenDidMount/ useEffect钩子中（在执行此逻辑时可以呈现加载/空视图）。

- Rocío García Luque

Answer 3

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

然后您需要定义任何唯一的键

const ASYNC_STORAGE_COMMENTS_KEY = 'ANYTHING_UNIQUE_STRING'

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

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

对于获取数据

const your_var = await AsyncStorage.getItem(ASYNC_STORAGE_COMMENTS_KEY);

- Prafull Sharma

Answer 4

我遇到了同样的错误，但是我使用了一个包装AsyncStorage的库，叫做react-native-simple-store。问题在于我试图使用一个还没有准备好的变量（它是null/undefined）从存储中获取数据。这个变量只有在渲染后一段时间才会准备好。所以我添加了一个if条件，如果它是null就不做任何事情，当状态改变并且组件重新渲染时，变量现在已经准备好了，所以它将进入if语句并访问存储。

- Sarah cartenz