react hook 的useState更新是异步的,所以在连续更新出发useState时会出现问题
eg:
import React, {useState} from 'react';
export default () => {
const [obj, setObj] = useState({
a: 1,
b: 2
})
const changeObj = () => {
// 连续触发2次setObj(实际项目不会这样写,我这样写只是为了模拟连续触发2次setObj带来的问题)
setObj({...obj, a: 2})
setObj({...obj, b: 3})
}
return (<div onClick={changeObj}>
// 此时页面上显示的值为 {a: 1, b: 3}, 出现该问题的原因是因为useState是异步的,在第二次触发setObj时,obj还是没更新a之前的obj,所以出现该结果
{JSON.stringify(obj)}
</div>)
}
解决此情况的方式,就是在第二次触发时使用setObj((data) => ({...data, b: 3})) 这样的方式
import React, {useState} from 'react';
export default () => {
const [obj, setObj] = useState({
a: 1,
b: 2
})
const changeObj = () => {
// 连续触发2次setObj&#