在现今的react中我们修改状态需要借助useState这个函数,但是使用它的时候我们要遵守它的使用规则。
状态的修改规则
在React中状态被认为是只读的,我们应该始终替换它而不是修改它, 直接修改状态不能引发视图更新
如下在修改count的值时,直接修改无法实现页面更新
const [count, setCount] = React.useState(1)
const addCount = () => {
//直接修改 无法实现页面的更新
count++
}
我们需要借助setCount实现页面更新
const [count, setCount] = React.useState(1)
const addCount = () => {
// 用传入的新值替换掉旧值
setCount(count+1)
}
此时有人会想count+1不如count++来的容易,但是我们要知道count++的值是等于原变量的值,只有++count的值是等于自增后的值。同时定义count时要使用let
// 使用let
let [count, setCount] = React.useState(1)
const addCount = () => {
// 使用++count 实现更新
setCount(++count)
}
修改对象状态
对于对象类型的状态变量,应该始终给set方法一个全新的对象来进行修改
const [obj, setObj] = React.useState({ name: 'tom' })
const changeName = () => {
// 直接修改原对象 不引起试图变化
obj.name = 'jack'
console.log(obj.name) //jack
}
正确写法
const [obj, setObj] = React.useState({ name: 'tom',age:18 })
const changeName = () => {
// 调用set传入新对象用于修改
setObj({
...obj,
name:'jack' // 直接替换原先name值
})
}