0
const [list, setList] = useState([]);
useEffect(() => {
        const getData = async () => {
            let storeList = [];
            for (let i = 0; i<50; i++) {
                try {   
                    const token = await contract.methods.tokenOfOwnerByIndex(accountId , i).call();
                    let data = await contract.methods.tokenURI(token).call();
                    const receivedData = await fetch(data);
                    let jsonData = await receivedData.json();
                    storeList.push(jsonData);
                    setList(storeList);
                } catch(error) {
                    cogoToast.error(`Error caused in fetching data of ${i} number token`);
                }
            }
        };
        if (contract) getData();
    }, [contract]);

the initial state of "list" is empty. When the loop is run for 1st time and the list is updated for the first time, the component re-renders, but after that, even though the state is changing the component does not re-render.

Ideally, the component should re-render when the state changes.

Ketul s
  • 55
  • 1
  • 8

1 Answers1

0

You're mutating the array that already exists, not creating a new one. When you set state in a function component, react does a === between the old state and the new state. If they're the same, it skips rendering.

To fix this, create a new array and set state with that:

let jsonData = await receivedData.json();
setList(prev => [...prev, jsonData]);
Nicholas Tower
  • 72,740
  • 7
  • 86
  • 98
  • but i am updating the array in every iteration. If react does `===` , then it should return false because the length of array of old state and new state will not be the same. – Ketul s Apr 04 '22 at 13:05
  • `If react does === , then it should return false because the length of array of old state and new state will not be the same.` That's not what `===` does. If you use `===` to compare two array references, it checks whether they're referring to the same spot in memory. Since you only ever create one array and then keep pushing to it, it's always the same array. – Nicholas Tower Apr 04 '22 at 13:07