REACT/NEXT.JS , Updating useState from useEffect is not rendering html

Question

Anybody know why its not updating state and rendering my conditional html? Main goal is to fetch data, when successful, filter for data missing a certain property, fix missing data, then setLoading to false as everything needed has been fetched. Its weird because after waiting a little bit of time, going back to vscode and commenting out setNFTsLoading(false) in the useEffect area, saving, then uncommenting actually updates as intended...

  const [NFTs, setNFTs] = useState();
  const [NFTsLoading, setNFTsLoading] = useState(true);

  useEffect(() => {
    getNFTBalances({
      params: { chain: "rinkeby" },
      onSuccess: () => {
        const nullMetadatas = data?.result.filter(
          (nft) =>
            !nft?.metadata ||
            nft?.metadata === null ||
            nft?.metadata == null ||
            nft?.metadata === undefined ||
            nft?.metadata == undefined
        );

        nullMetadatas.map((nft) => {
          token?.reSyncMetadata({
            chain: "rinkeby",
            address: nft.token_address,
            token_id: nft.token_id,
            flag: "uri",
          });
        });

        setNFTs(data.result);
        setNFTsLoading(false);
      },
    });
  }, [NFTsLoading]);

returning HTML

        <div className="grid grid-cols-2 justify-evenly gap-y-10 gap-x-2 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
          {NFTsLoading === false &&
            NFTs?.map(({ metadata, token_id, image }) => (
              <NFTCard
                key={`${token_id}`}
                title={metadata?.name}
                img={metadata?.image}
                desc={metadata?.description}
              />
            ))}
        </div>

Just out of curiosity, are you getting any recursion warning in console? — Pushpendu
– Pushpendu, Commented Jan 29, 2022 at 7:45
Can you please check if anything is left in data.result? Please make sure you didn't end up filtering out everything. — Helper
– Helper, Commented Jan 29, 2022 at 8:13
I didn't understand what the point of keeping NFTsLoading as a dependency in useEffect() is.... when you fetch the data for the first time and NFTsLoading is set to false then the same function is called again which isnt neccessary... Try keeping the dependencies empty (so that useEffect is run everytime the component mounts) or just create a constant so that useEffect runs only once. (Maybe that might solve your issue) — lakimapturn
– lakimapturn, Commented Jan 29, 2022 at 8:13

ill Monk · Accepted Answer · 2022-10-31 12:24:46Z

I believe you need getStaticProps(). Next.js won't perform that "GET" on page load, but it will before the page loads.

export const getStaticProps = async () => {
  let result = {};
  getNFTBalances({
    params: { chain: "rinkeby" },
    onSuccess: () => {
      const nullMetadatas = data?.result.filter((nft) => !nft?.metadata || nft?.metadata === null || nft?.metadata == null || nft?.metadata === undefined || nft?.metadata == undefined);

      nullMetadatas.map((nft) => {
        token?.reSyncMetadata({
          chain: "rinkeby",
          address: nft.token_address,
          token_id: nft.token_id,
          flag: "uri",
        });
      });
      result = data.result;
    },
  });

  return { props: { data: result } };
};

Then you want to import that data through the props of your component. Ex:

export const PageComponent = ({data}) => {}

Collectives™ on Stack Overflow

REACT/NEXT.JS , Updating useState from useEffect is not rendering html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related