react Hooks useState不生效问题

场景：在页面上用户点赞后，立马点赞按钮高亮状态显示，再去发送点赞请求，若请求失败点赞高亮状态取消

代码实现:(由于是公司项目，没有真正源码，自己到家里以其它方式重现)

[code]import React, {useState} from 'react'
const HooksTest = () => {
const [isRed, setColor] = useState(false)
function changColor(){
setColor(!isRed) // 这里应该设置了isred: true
console.log(isRed) // false
setTimeout(() => {
console.log(isRed) // false
setColor(!isRed) // 这里还是设置为true...
}, 1000);
}
console.log(isRed) // true
return(
<h1 style={{color: isRed ? '#ff0000': '#61DAFB'}} onClick={changColor}>click me change color</h1>
)
}
export default HooksTest

上面代码setTimeout是模拟请求了一秒后失败情况，(你会发现高亮后,(请求失败)也不会取消高亮)

要解决这个问题也很简单第二次setColor那行写成setColor(isRed)就可以了；

为什么会有这样的情况？

后面想了很久，我个人想法应该是：

setColor的时候把HooksTest这个函数重样执行了一次，但是这次是以useState方式执行的，

const [isRed, setColor] = useState(false) 经过这次重新渲染变成了 const [isRed, setColor] = useState(setColor(!isRed))

react源码没有去看，貌似我应该看不懂

但是只有这样解释才是最合理的

之前认为是闭包的原因，后面测试，在useState后面定义了一个 let str = 'init';后然在点击事件里改变str = 'str';最后timeout里发现这个str是改变过后的了：

[code]const [isRed, setColor] = useState(false)
let str = 'init'
console.log('render:')
console.log(isRed)
function changColor(){
str = 'str'
setColor(!isRed)
console.log('changeColor')
console.log(str) // str
console.log(isRed)
setTimeout(() => {
console.log('timeout')
console.log(str) // str
console.log(isRed)
setColor(!isRed)
}, 1000);
}

先写到这里，下次有不同的见解再反回来看看