React Native では、リアルタイム Firebase テキストフィールドが変更された後、新しい値が表示されません。

Question

私は ReactNative でコーディングしていて、ライブ Google Firebase から値を取得する必要があります。値 (1) を取得できますが、データベース内の値が変更されても、アプリケーションのテキスト ボックスはそれに応じて変更されません (2)。つまり、データベースとのリアルタイム同期は実装されていません。理由がわかりません。この問題を手伝ってくれませんか？どうもありがとうございます！私が書いたコードは次のとおりです: importReact,{useState}from'react';import{View

P粉670838735 · Answer

This is because data is loaded from Firebase (and pretty much any modern cloud API) asynchronously, and is not yet available when your {Data} is executed.

You'll want to:

Store the data in the state of your component
Tell ReactJS to rerender the component when the state changes

The common way to do this is by using the useState and useEffect hooks.

const [data, setData] = useState();

// Putting the code to load from Firebase in a useEffect call 
// with no dependencies (the empty array at the end) ensure it
// only runs once, when the component is first rendered.
useEffect(() => {
  database()
    .ref('/esp01_1/id')
    .on('value', snapshot => {
      // Calling setData puts the data in the component's state
      // and tells ReactJS to rerender the UI.
      setData(snapshot.val());
    });
}, []);

This is a quite complex topic, so I recommend reading up on both of the hooks used here and also see:

Firebase data not defined when used inside react useState (which is quite similar)
Firebase | Reading data from Firebase returns "undefined", but console.log shows precise result (which shows how to also unsubscribe)
Firebase response is too slow
Use useEffect in react functional class to write data to firebase