使用 setState 时如何立即获取更新的状态?

Question

我有一个View和Column组件。我使用registerColumn方法在View上下文中存储列refs：

const [columns, setColumns] = useState([]);
const registerColumn = (node) => {
const column = {
someUniqueId: Math.random(),
node,
// more props
};
setColumns(prev => [...prev, column])
}
const context = {
columns,
registerColumn
}
<ViewContext.Provider values={context}>
<View>
<Column/>
<Column/>
<Column/>
</View>
<View>
<Table/>
</View>
</ViewContext.Provider>

我真正困惑的是Column组件。每当我尝试注册列并在之后获取更新的长度时，它都不会按时更新，因为setState异步工作：

const {columns, registerColumn} = useContext(ViewContext);
const ref = useRef(null);
useEffect(() => {
registerColumn(ref.current);
// Here is where updated column length but it keeps saying it's 0 length
console.log(`Hello from column number ${columns.length}`);
}, []);
[...]

文档说，我可以使用useEffectcolumns作为依赖项，并在下次渲染时更新长度。但是，我需要在调用registerColumn后立即使用更新的状态 - 使用另一种useEffect基本上意味着破坏执行上下文和延迟任务的需要，并且可能引入其他回调只是为了解决这个问题。

我是 React 的新手，但我很确定还有其他可能性可以解决这个问题，所以任何帮助将不胜感激。

Answer 1

在useEffect中更新setState和在useEffect中更新控制台日志将不起作用，因为useState异步工作，并对所有状态进行批处理并更新一次。它正在更新状态，但它不会反映该状态，因为会批量更新。
您可以将其他 useEffect 与列的依赖关系一起使用，因此每次 registerColumn 更新时，都会调用第二个 useEffect 并控制台记录该值。

useEffect(() => {
registerColumn(ref.current);
}, []);

useEffect(() => {
console.log(`Hello from column number ${columns.length}`);
},[columns]);