Load props before using to set state in a useEffect hook

Question

I am trying to pass a user address into this Fetch Function, set the value of a state variable equal to the address, and then use that address to make an api call. But as expected, everything runs at the same time and the api call fails because it does not receive the user address.

I am relatively new to useEffect, the below is how I assume a function like this should be written, but evidently I am missing something. It does not return any errors, just a undefined value in the log statement I have below.

const Fetch = (props) => {
    const api_key = process.env.REACT_APP_API_KEY;
    const [addr,setAddr] = useState([])
    const [data,setData] = useState([])

    useEffect(() => {
        async function Get(){
            setAddr(props.useraddress)
        }
        Get();
    }, []);
  
    async function GetNFT() {
        useEffect(() => {
          axios
            .get(
              `https://flow-testnet.g.alchemy.com/v2/${api_key}/getNFTs/?owner=${addr}&offset=0&limit=10`
            )
            .then(res=> {
              setData(res.data.nfts);
            })
            .catch(err=> {
              console.log(err);
            })
        },[]);
      }
      GetNFT();
      console.log(data);

return (
   <div>
    <script>{console.log('Fetch'+addr)}</script>
        {/* 
        <>
        {data.map((dat,id)=>{
        return <div key={id}>
            <FetchData NFTData={dat} />
        </div>
        })}
        </>
        */} 
   </div>
  )
}

Any reason why u can't use props.useraddress on the api call directly? When do you change the useraddress? — mont_, Oct 19 '22 at 22:20
@mont_ I tried that earlier, yielded the same result, assuming it is because props needs to load before it is used, so it needs some kind of await I believe. — Matt, Oct 19 '22 at 22:38

score 0 · Answer 1 · answered Oct 19 '22 at 22:22

You need a single useEffect that would depend on useraddress that you can destructure from the props, and make an api call that uses the useraddress. You don't need to store useraddress in the state.

const api_key = process.env.REACT_APP_API_KEY

const createUrl = addr => `https://flow-testnet.g.alchemy.com/v2/${api_key}/getNFTs/?owner=${addr}&offset=0&limit=10`

const Fetch = ({ useraddress }) => {
  const [addr,setAddr] = useState([])
  const [data,setData] = useState([])

  useEffect(() => {
    axios.get(createUrlcreateUrl(useraddress))
      .then(res=> {
        setData(res.data.nfts)
      })
      .catch(err=> {
        console.log(err)
      })
  }, [useraddress])

  console.log(data)

  return (
    // jsx
  )
}

Note that the useEffect would be triggered on component's mount, and whenever useraddress changes. If useraddress might be empty or undefined when the component mounts, add a condition inside that avoids the call:

useEffect(() => {
  if(!useraddress) return // skip the api call if the address is empty/undefined/null

  axios.get(createUrlcreateUrl(useraddress))
    .then(res => {
      setData(res.data.nfts)
    })
    .catch(err => {
      console.log(err)
    })
}, [useraddress])

Load props before using to set state in a useEffect hook

1 Answers1