设置状态未在使用效果中更新

Question

我有一个简单的组件如下：

import React, {useEffect, useState} from 'react';

function App() {
const [bus1Points, setBus1Points] = useState();
const updateBuses = () => {
setTimeout(updateBuses, 1000);
console.log(bus1Points);  // Undefined each second
};
setInterval(() => {
console.log('Interval ' + bus1Points); // <-- Prints expected value
}, 500)
console.log(bus1Points);
useEffect(() => {
setBus1Points('TEST');
updateBuses();
}, []);
return (
<div style={{ height: '100%', width: '100%' }}>
{bus1Points}
</div>
);
}
export default App;

我不确定为什么每次都未定义。这是 React 中的一个错误吗？为什么updateBuses只能得到bus1points的初始值？(请注意，bus1points在 UI 中正确呈现(

Answer 1

它是未定义的，因为状态更新会反映在下一次渲染中。当您看到它在 UI 中正确呈现时，是因为在状态更新后，ReactJs 调用了另一个渲染周期(其中bus1Points具有新值(并再次呈现 UI。

每当你做setBus1Points你告诉 react 批处理一个新的状态值，但你的变量bus1Points只是一个值，所以这就是为什么它不会改变

更新

问题是当你这样做时

const updateBuses = () => {
setTimeout(updateBuses, 1000);
console.log(bus1Points);  // Undefined each second
};

您将在第一次渲染中捕获bus1Points的值(带有闭包(。给定bus1Points的初始值为undefined，您将始终记录该值。这是因为updateBuses引用了一个超出其定义的变量，因此它会"捕获"该值，并且每次都通过递归setTimeout调用该值。

但是，您的setInterval在每个渲染上都会执行，因此您正在捕获bus1Points的新值(并且您每次添加越来越多的日志，从而产生内存泄漏(。这不是递归函数，因此它会在每个渲染中捕获新值