ReactJS状態が更新された後、一度だけデータをフェッチするにはどうすればよいですか?

0
2022.01.13

私はReactの初心者で、データをフェッチする前に状態が特定の(ヌルではない)更新されるのを待つ方法を考え出すのが難しいです。私はfirebase JWTを使用しており、トークンをヘッダーに渡していますが、現在のコードでは実行され、nullの値を渡しました。fetchData 関数が一度だけ実行され、トークン値が設定された後にのみ実行されるようにする、素知らずのフックトリックはありますか?

私は const [token, setToken] = useState(auth.currentUser.getIdToken()); として状態を設定しようとしましたが、それは(その非同期のためにそれを推測する)ではなく、ヘッダーにPromiseを返すように見えます。感謝!

import React, { useState, useEffect } from 'react';

import { auth } from '../../firebase-config';

const RecordEntry = (props) => {
  
  const [token, setToken] = useState();

  const [isLoading, setIsLoading] = useState(false);

    var mydata = 
     {
        entry_id = props.entry_id
    }


  //should only call this once
  const fetchData = async () => {
      const current_token = auth.currentUser.getIdToken();
      setToken(current_token);
      //need to yield here to verify token is set and not null - this is where I am stuck
      fetch('https://mysite/api/recordEntry' , {
        method: 'POST',
        headers: new Headers({ 
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        }),
        body: JSON.stringify(mydata)
        })
      .then((response) => response.json())
      .then((data) => {
        setIsLoading(false);
      })
      .catch((error) => {
        setIsLoading(false);
        console.log(error);
      });
  };


//passing empty array so the effect only runs once
  useEffect(() => {
    fetchData();
}, []);



  if (isLoading) {
    return <div>Loading...</div>;
  }
  return (
    <div>
        <h1> Entry Recorded </h1>
    </div>
  );
};
export default RecordEntry;
回答
4
2022.01.13

この解決策を試してみてください

  const [didFetch,setDidFetch] = useState(false)
  useEffect(() => {
     if(!didFetch){
     setDidFetch(true)
     fetchData();
     }
   }, []);