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

【问题标题】：In React, why does setState in a setTimeout only work properly with a copy of the state?在 React 中，为什么 setTimeout 中的 setState 只能与状态副本一起正常工作？
【发布时间】：2020-06-25 19:16:03
【问题描述】：

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

我认为这与 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;
}

【问题讨论】：

标签： javascript reactjs settimeout render setstate

【解决方案1】：

由于状态是不可变的，因此您无法直接对其进行操作。尝试使用可变数据调试某些东西，在某些情况下会变得很痛苦。

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

【讨论】：

谢谢。我查看了我以前的一些项目，在谷歌上快速搜索状态不变性让我觉得自己很愚蠢哈哈。
没有愚蠢的问题，即使只是为了提醒 ;)