索引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掛鈎（您可以在執行此邏輯時呈現加載/空視圖）。