为什么从useEffect运行回调会打印错误的值

Question

我正试图理解这种奇怪的行为：

const [counter, setCounter] = useState<number>(1);
useEffect(() => {
setCounter(2);
setTimeout(function () {
console.log('counter = ', counter); // => counter = 1
}, 1000);
}, []);

Answer 1

当您的组件第一次安装时，您的效果将被调用，因为您正在传递deps的空数组。。。其中counter变量为1

setCounter函数是async函数，react-native ui会将该调用按顺序推入应该调用的函数调用堆栈，但推入该调用堆栈的第一个函数调用是您的console.log，counter变量的值是1

如果要打印counter的更新值，请将counter放入deps的列表中，如：

const [counter, setCounter] = useState<number>(1);
useEffect(() => {
setCounter(2);
}, []);
useEffect(() => {
setTimeout(function () {
console.log('counter = ', counter); // => counter = 1
}, 1000);
}, [counter]);

Answer 2

值得一提的是，您正在useEffect中使用计数器状态值。这是ESLint使用默认设置的目标。您的useEffect取决于该状态，应该将其添加到依赖数组中。[ESLint错误][1]

正确使用useEffect会导致useTimeout运行2次。在初次渲染时和重新渲染后。[1] ：https://i.stack.imgur.com/yiLJi.png