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

凯图尔
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]);

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

理想情况下,组件应在状态更改时重新渲染。

尼古拉斯大厦

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

要解决此问题,请创建一个新数组并使用它设置状态:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Vue - 状态变化不会重新渲染模板?

反应状态变化不会导致重新渲染

当父组件的状态发生变化时,子组件不会重新渲染

React 组件的地图不会在状态变化时重新渲染

页面刷新后,即使状态发生变化,React也不会重新渲染组件

我的组件不会在状态变化时重新渲染本机反应

重新渲染状态变化

当状态无变化时,角度重新渲染组件列表

当数组状态发生变化时,react 不会在 array.map 中重新渲染组件

即使状态已更新,组件也不会重新渲染

在 mobx 中更新状态时组件不会重新渲染

组件不会在状态更新时重新渲染

当 prop 更改时,无状态组件不会重新渲染

我更改状态后,React组件不会重新渲染

状态更改后,React组件不会重新渲染

reactjs-更改状态不会重新渲染组件

状态更改时,React组件不会重新渲染

使用Redux更改状态时,React组件不会重新渲染

React 功能组件状态变化不会触发子组件重新读取其 props

componentWillReceiveProps不会重新渲染组件

如果部分状态发生变化,如何停止反应重新渲染组件?

React组件没有使用相同的道具重新渲染,但是子状态发生了变化

即使实际值相同,状态变化时组件也会重新渲染

当react js中的任何状态发生变化时,如何停止重新渲染子组件?

你能控制基于状态变化的功能性反应组件的重新渲染吗?

如果自定义钩子内部的状态发生变化,组件会重新渲染吗?

即使状态发生变化,React,Redux,mapStateToProps也不会重新渲染

组件不会根据react-redux中的状态变化进行渲染

对状态变化做出重新渲染