状态改变不会重新渲染组件

Question

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]);

“列表”的初始状态为空。当循环第一次运行并且列表第一次更新时，组件会重新渲染，但之后，即使状态正在更改，组件也不会重新渲染。

理想情况下，组件应在状态更改时重新呈现。

Answer 1

您正在改变已经存在的数组，而不是创建一个新数组。当您在功能组件中设置状态时，react 会在旧状态和新状态之间执行 ===。如果它们相同，则跳过渲染。

要解决此问题，请创建一个新数组并设置状态：

let jsonData = await receivedData.json();
setList(prev => [...prev, jsonData]);

状态改变不会重新渲染组件

change in state does not re-renders the component

rerender

mutated

reactjs

react-hooks

use-state