更改 UseState Hook React 组件后不会重新渲染

Question

I read many topics around these problem but none of them helped to find an answer.

I am using a useEffect to fetch an array of objects "nftRewards". And it's working fine cause I can see them on the console. But the part of the render that depends on this hook is not re-render once it was updated. And I don't understand why.

  const [campaignRewardsJson, setCampaignRewardsJson] = useState<nftReward[]>([]);

  const { data: rewards } = useContractRead({
    address: campaignsId,
    abi: campaignABI,
    functionName: 'getRewards',
  });

  async function getRewardObject() {
    var array: nftReward[] = [];
    rewards.map(async (reward, index) => {
      const json = fetch(reward[2]);
      const data = await json.then((res) => res.json());

      const nft: nftReward = {
        title: data.name,
        description: data.description,
        imageURL: data.image,
        price: reward[0],
        quantity: reward[1],
      };

      array.push(nft);
    });
    return array;
  }

  type nftReward = {
    title: string;
    description: string;
    imageURL: string;
    price: number;
    quantity: number;
  };


  useEffect(() => {
    if (rewards) {
      const fetchData = async () => {
        var data = await getRewardObject();

        setCampaignRewardsJson(data);
      };
      // call the function
      fetchData().catch(console.error);
    }
  }, [rewards]);

And At the end of my render, I have this but It's never render by react:

{campaignRewardsJson.map((reward, index) => (
            <Card direction={{ base: 'column', sm: 'row' }} overflow="hidden" variant="outline">
              <Image objectFit="cover" maxW={{ base: '100%', sm: '200px' }} src={reward.imageURL} alt="Caffe Latte" />

              <Stack>
                <CardBody>
                  <Heading size="md">{reward.title}</Heading>
                  <Text py="2">{reward.description}</Text>
                </CardBody>

                <CardFooter>
                  <Button variant="solid" colorScheme="blue">
                    Mint NFT
                  </Button>
                </CardFooter>
              </Stack>
            </Card>
          ))}

Answer 1

If rewards is state in this component and type of that is object or array. When you pass array or object to dependency, every render snapshot will compare with previous version. You may try keyword useEffect dependency array and object comparison . for more information.

Answer 2

Try this:

useEffect(() => {
  if (rewards) {
    const fetchData = async () => await getRewardObject();

    // call the function
    fetchData()
      .then(data => setCampaignRewardsJson(data))
      .catch(console.error);
    }
 }, [rewards]);

Answer 3

your useEffect hook has rewards as its dependencies. and it will only run if rewards is true or it's defined and not null(truthy). you need to check that condition.