react的踩坑记录(二)

1.在setState后的回调函数,带括号和不带括号的区别

在业务开发中,自己写的后台分页,根据分页信息重新查询
关键在与setState函数是异步的,不会立即修改state的值,当回调函数带括号时,他是会立即执行,因此拿到的state值时没有改变过的,不带括号时时等state赋值完成才会执行回调函数。

正确代码:

onPaginationShowSizeChange = (current, pageSize) => {
        this.setState({
            pageIndex:1,
            pageSize
        },this.load)
    }

问题代码:

onPaginationShowSizeChange = (current, pageSize) => {
        this.setState({
            pageIndex:1,
            pageSize
        },this.load())
    }
React中使用useState是非常常见的,它让我们能够在函数组件中添加状态。然而,有一些常见的陷阱需要注意。下面是一些指南: 1. 错误使用数组解构:当使用数组解构语法来访问useState返回的数组时,确保你使用正确的索引位置。例如,如果你使用了多个useState,确保你在解构时使用正确的索引。否则,你可能会将状态值分配给错误的变量。 2. 对象与合并:当你使用对象作为useState的初始值时,记住useState并不会自动将新的对象与旧的对象合并。相反,它会直接替换整个对象。所以,如果你想保留旧对象的内容并仅更新其中的一部分,你需要手动进行合并。 3. 引用相等性:React使用引用相等性来检测状态的更改。这意味着如果你在更新状态时返回相同的引用,React不会触发重新渲染。因此,确保在更新状态时返回新的引用,而不是直接修改现有对象。 4. 异步更新:当在事件处理程序或异步函数中更新状态时,记得useState是异步的。这意味着多个setState调用可能会被合并在一起,而不是立即更新。如果你需要基于当前状态进行计算,请使用回调函数形式的setState,以便正确地捕获先前的状态。 5. 多个useState:当在一个组件中使用多个useState时,确保给每个useState调用一个有意义的名称。这样可以使代码更清晰,易于理解和维护。 6. 无限循环:在使用useState时,一定要小心避免进入无限循环。例如,如果你在组件的渲染阶段内调用了useState,可能会导致无限循环的情况。解决这个问题的方法是确保条件语句正确地包裹useState的调用。 希望这些指南能够帮助你避免在使用useState时遇到的常见问题!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值