使用 setState 時如何立即更新 state？

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}`);
}, []);

[...]

文檔說，我可以使用useEffect和columns作為依賴項，並在下次渲染時更新長度。 但是，我需要在調用registerColumn后立即使用更新的 state - 使用另一個useEffect基本上意味着破壞執行上下文和需要延遲任務，加上可能引入其他回調來解決這個問題。

我是 React 的新手，但我很確定還有其他可能解決這個問題，所以任何幫助都將不勝感激。

Answer 1

更新 useEffect 中的 setState 和 useEffect 中的控制台日志將不起作用，因為 useState 異步工作並且對所有 state 進行批處理並更新一次。 它正在更新 state 但它不會反映那一刻，因為會通過更新對批次做出反應。
您可以使用其他具有列依賴性的 useEffect，因此每次 registerColumn 更新時，都會調用第二個 useEffect 並控制台記錄該值。

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


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