在 React 中，为什么 setTimeout 中的 setState 只能与状态副本一起正常工作？

Question

在我下面的代码中，我将 setCards 放在 setTimeout 中，但 1 秒后渲染只有在我传入状态副本时才会正确：[...cardStates] 而不是 cardStates 本身。如果我不这样做，setCards 将呈现 cardStates，就像 hideCards() 对状态进行更改之前一样。

我认为这与 setTimeout 将函数放入队列时的状态有关，但我不完全了解发生了什么。我查了很多资料，发现陈旧的闭包之类的东西，但我不确定这是否是正确的方向。有人可以帮我解决这个问题吗？谢谢。

useEffect(() => {
        if (numberShowing(cardStates) === 2) {
            setTimeout(() => {
                setCards(hideCards([...cardStates]));
            }, 1000)
        }
    })

function hideCards(cards) {
    let showing = cards.filter(card => {
        return card.cardState === 'showing';
    })
    showing.forEach(card => {
        card.cardState = 'hiding';
    });
    return cards;
}

Answer 1

因为状态是不可变的，所以不能直接操作它。尝试调试带有可变数据的东西，在某些情况下它会变得很痛苦。

这不是不变性的唯一好处，但我不会做比您在互联网上已经找到的更好的解释；）。

在 React 中，为什么 setTimeout 中的 setState 只能与状态副本一起正常工作？

In React, why does setState in a setTimeout only work properly with a copy of the state?

javascript

render

settimeout

setstate

reactjs