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

Question

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

リーリー

Google Firebase からリアルタイムで値を取得する必要があり、データベース内で値が変更された場合は、テキスト ボックス内でも変更する必要があります。

Answer 1

This is because data is loaded from Firebase (and pretty much any modern cloud API) asynchronously, and is not yet available when your <Text style={styles.text}>{Data}</Text> is executed.

You'll want to:

1. Store the data in the state of your component
2. 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