useState 非瞬时更新中断函数

Question

我有一个 sumButtonsDict 存储对象字典的状态变量。我还构建了一个简单的 addSumButton() 函数，将一个新对象添加到 sumButtonsDict:

const [sumButtonsDict, setSumButtonsDict] = useState({})

function addSumButton(sum) {
    const dictKey = Object.keys(sumButtonsDict).length
    const sumButtonDict = {
        sum: sum,
        isActive: false
    }
    setSumButtonsDict(prevState => ({...prevState, [dictKey]: sumButtonDict}))
}

如您所见，该函数将每个新字典项目存储在与其所在索引相对应的键中（例如，第一项的键为 0，第二项的键为 1...），但正确的键是源自 sumButtonsDict.

中已经存在的对象的计数

安装组件时，我使用以下方法添加了 5 个新按钮：

useEffect(() => {
    addSumButton(10)
    addSumButton(25)
    addSumButton(50)
    addSumButton(100)
    addSumButton(250)
}, [])

但最终只有 1 个存在于 sumButtonsDict 中。我怀疑这是因为 setState() 没有立即更新状态变量，因此当我调用 Object.keys(sumButtonsDict).length 它继续返回 0 即使 addSumButton() 有运行之前多次。

我该如何解决这个问题？

Answer 1

您已经在使用 setSumButtonsDict 的函数版本来获取之前的状态，这是正确的做法。您只需要将其他代码也移到函数中，因此整个计算使用 prevState:

function addSumButton(sum) {
  setSumButtonsDict(prevState => {
    const dictKey = Object.keys(prevState).length;
    const sumButtonDict = {
      sum: sum,
      active: false,
    }
    return {...prevState, [dictKey]: sumButtonDict}

  });
}

useState 非瞬时更新中断函数

useState non-instantaneous updates break function

reactjs

use-state