web-dev-qa-db-ja.com

範囲外インデックスNaN（リアルタイムデータベース）のフレームを取得しようとしました

私はfirebaseデータベースからいくつかの行をレンダリングしようとしています、私はこのエラーを得ています：

TaskQueue：タスクのエラー：不変の違反：範囲外のインデックスNaNのフレームを取得しようとしました

  const { currentUser } = firebase.auth();
    var userfavorites = firebase.database().ref(`/users/${currentUser.uid}/favorites/`);
    userfavorites.once('value').then(snapshot => {
      this.setState({ userfav: snapshot.val() })
    })

...

  <FlatList
    data={this.state.userfav}
    renderItem={({ item }) => (
      <Text>{item.favdata}</Text>
    )}
  />

DB Structure

reactjsfirebasereact-nativefirebase-realtime-database
12
blacksun

私は同じ問題を抱えていました、この問題がオブジェクト名の理由であるようです。下の画像では、Firebaseエンドポイントからスナップショットをフェッチするとすぐに、React Nativeによって認識されないIDが付属しています。また、reactは空のオブジェクトのように動作します。 firebase returned snapshot

あなたがしなければならないすべては、以下の例のようにそれをフェッチした後、オブジェクトのアイテムをマップすることです、

        const fbObject = snap.val();
        const newArr = [];
        Object.keys(fbObject).map( (key,index)=>{
            console.log(key);
            console.log("||");
            console.log(index);
            newArr.Push(fbObject[key]);
        });
3
mert

私はこのエラーに遭遇しました、PHPバックエンドがあり、json_encodedデータをFlatListに取得しようとしました。

問題：RESTエンドポイントがオブジェクトを返していました。例：

_{"Total_Excavator":2,"Active_Excavator":2,"Total_load":6804}_

ソリューション：配列を返すように修正しました。例：

_[{"Total_Excavator":2,"Active_Excavator":2,"Total_load":6804}]
_

角括弧に注意してください。$data[] = json_encode($excavatorArray)ではなく$data = json_encode($excavatorArray)を使用しました。それが誰かを助けることを願っています

1
Huey Mataruse

このエラーは、getメソッドを使用してデータベースからデータを取得し、モバイルデータをオンにするのを忘れた場合にも発生する可能性があります。

0
Abhishek Yadav

@mertからの回答を少し変更しただけです。 JavaScriptのmap演算子は配列を返します。したがって、Push要素をnewArrに追加する必要はありません。また、新しい配列の要素には一意のFirebase idがありません。したがって、配列要素に追加する必要があります。

const fbObject = snapshot.val(); const newArr = Object.keys(fbObject).map((key) => { fbObject[key].id = key; return fbObject[key]; });

次のようなnewArrayになります。

[ { "id": "12345", "name": "Jane Doe", "age": 18 }, { "id": "23456", "name": "John Smith", "age": 27 } ]

0
Justin Noel

同様の問題があり、フラットリストのデータを州に保存しました。状態のデータがオブジェクトではなくlistであることを確認する必要があります。

_this.state = {
    ...,
    data: [], // <-- wrap your flatlist's data in there
}
_

データ/状態を変更するときは、常にコールバック関数を使用して何かを実行し、UIの同期を維持します。

this.setState({..., data}, () => yourCallback())

0
Kevin Michael Schott