How to use useReadContract in callback wagmi?

Question

Hello I doing project web3 and i use wagmi. When i get listTokenUrl, after i want call each item to read tokenUri, but have error "Error: React Hook "useContractRead" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks"

There my code, tks so much .

I get list tokenID here

  const { data: listTokenIdBaby } = useContractBabyListTokenIds({
    args: address ? [address] : undefined,
  });

After i map lisToken to get tokenUri

  const dataBaby = listTokenIdBaby?.map(item => {
    const { data } = useContractBabyTokenUri({
      args: [item],
    });
    return data;
  });

Answer 1

Looks like you might want to use the useContractReads hook. (useContractReads)

You would want to map through listTokenIdBaby and pass the config array as contracts: ... to useContractReads.

An example from my personal experience is below:

const { data: walletClient } = useWalletClient();
  const { isLoading, data: availableGameSessions } = useContractRead({
    ...contracts.factory,
    functionName: 'getGameSessions',
    account: walletClient?.account,
    watch: true,
  });
  const { data: activeGameSessions, isLoading: isGameStakesLoading } =
    useContractReads({
      contracts: availableGameSessions?.map((gameSession: Hash) => {
        return {
          address: gameSession,
          functionName: 'stake',
          abi: contracts.rpslsGame.abi,
        };
      }),
      select: (data) => {
        if (!availableGameSessions) return [];

        return data
          .filter((session) => Number(session.result) > 0)
          .map((_, index) => availableGameSessions[index]);
      },
      watch: true,
    });

If you provide a more detailed reproduceable template, I can help you adapting the hooks calls for your specific purposes.