react使用hooks踩坑记录

1、useState异步回调的问题

当使用usestate对数据进行更新，并不能立刻获取到最新的数据。

const [a, setA] = useState(1);
const handleTest = () => {
  console.log(a) // 1
  setName(2)
  console.log(a) // 1
}

解决方案1：配合useEffect使用

const [a, setA] = useState(1);
const handleTest = () => {
  console.log(a) // 1
  setName(2)
  console.log(a) // 1
}
useEffect(() => {
   console.log(a) //2
 },[a])

解决方案2：创建一个新的变量保存最新的数据

const [a, setA] = useState(1);
const handleTest = () => {
  console.log(a) //1
  const newA = 2
  setName(newA)
  console.log(newA) //2
}

2、使用useState的回调函数形式更改数据。

const [a, setA] = useState({c:1})
/** oldA为之前的a,return为设置的新值 */
setA((oldA) => ({
	c: oldA.c + 1
}))

3、useState,如果保存引用数据，useEffect检测不到变化

const [obj, setObj] = useState({a: 1})
const handleObj = () => {
	setObj(ov => {
      ov.a = 2
      return ov
    })
}
useEffect(() => {
	console.log(obj)  
},[obj])
//obj值改变时，并未触发打印

解决方案1：

const [obj, setObj] = useState({a: 1})
const handleObj = () => {
	setObj(ov => {
      ov.a = 2
      /** 返回一个新的对象,useEffectc才能检测得到 */
      return {...ov}
    })
}
useEffect(() => {
	console.log(obj)  
},[obj])

解决方案2：

const [obj, setObj] = useState({a: 1})
const handleObj = () => {
	setObj(ov => ({
		...ov,
		a: 2
	}))
}
useEffect(() => {
	console.log(obj)  
},[obj])