我们使用React进行开发的时候,有可能会出现已经执行了setState()的方法更新过state了,但是为什么组件还是未刷新呢?

        这里就会有一个概念:地址。类似C,Java这种后端语言一样。如果我们的state是一个复杂对象的话(数组,对象)。我们的变量存储的是state的地址而不是值。

const [object,setObject] = useState({id:'1',name:'张三'})

        就像上面这段代码,object这个state存储的是{id:'1',name:'张三'}这个对象在内存中的地址,而不是值本身。那么这个概念和react刷新的机制有什么关系呢?因为React的useState()这个hook的刷新机制是根据state存储的值是否发生改变而进行刷新的。

const cloneObject = object
cloneObject.name = '李四'
setObject(cloneObject)
setObject((preObj)=>{
    preObj.name = '李四'
    return preObj
})

        以上两种setState的方式都不会触发组件的刷新,正如我们上面提到的概念,object存储的地址,虽然我们改变了object里的一个属性的值,但object本身存储的还是地址,并没有发生变化,所以是不会触发组件更新的。

        那么怎么解决呢,根据上面的概念,很容易的就能想到只需要改变state的地址就行了。也就是新创建一个对象来覆盖原来的对象,这样它的地址自然和以前的不一样。那么怎么创建一个新的对象呢?

const cloneObject = JSON.parse(JSON.stringify(object))
cloneObject.name = '李四'
setObject(cloneObject)

        JSON.stringify方法的作用是将传入的参数转化为json字符串类型的数据。JSON.parse方法的作用是将传入的参数转化为json对象类型的数据。这样就能生成一个新的对象,这下地址就改变了。

const cloneObject = {...object,name:'李四'}
setObject(cloneObject)

        这个是利用的ES6的解构语法,其实和下面的方法一样。只是用起来更加简洁。本质上都是手动创建一个值一样的新对象,不过下面的方法不可取,这里只是帮大家理解上面的方法,大家开发中用上面的写法进行开发。

const cloneObject = {id:'1',name:'张三'}
cloneObject.name = '李四'
setObject(cloneObject)

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐