在使用react hook时候的一些问题记录
实际使用react hook的时候遇到的一些问题记录下来了，温故而知新。
问题1：useState已经重新赋值了，但是拿到的还是之前的值
例子1：界面上有个按钮，点击按钮界面上数值会增加1和2
const Test = () => {
const [arr, setArr] = useState([0]);
const handleClick = () => {
Promise.resolve()
.then(() => {
setArr([...arr, 1)];
}
.then(() => {
setArr([...arr, 2)];
}
}
return (
<div>
{arr.toString()}
<button onClick={handleClick}>按钮</button>
</div>
)
}
但是实际的结果是：
点击按钮，界面展示的是 0,2。跟预期需要展示的0，1，2不一样
例子2：点击按钮，执行三次setState，希望加3
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
}
但是实际的结果是：
点击按钮，界面展示的是1。跟预期需要展示的3不一样
原因
组件内部的任何函数，包括事件处理函数和Effect，都是从它被创建的那次渲染中被看到的，所以引用的值都是旧的（没找到原文出处，所以对“看到”这个词表示疑惑），理解为：因为界面没有重新渲染，执行的函数作用域还是旧的，所以里面值的引用还是之前的，所以即使多次执行，拿到的都是旧值，会导致界面展示出现异常。
直接在handleClick里面打印count，展示的还是上一次的值，不是最新的值，这个由react的调度机制决定的。文章来源：https://www.toymoban.com/news/detail-791600.html
修改建议：利用state hook参数可以是回调函数进行解决;或者可以用ref，但是ref记录值不太灵活，所以还是建议回调函数文章来源地址https://www.toymoban.com/news/detail-791600.html
setArr([...arr, 2)];
--------------变更成-------------
setArr((arr) => {
return [...arr, 2];
}
到了这里，关于react hook问题记录（持续更新）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
