從回調中調用 setState 會在一半的時間內更新 React Context 中的狀態

Question

這是 CodeSandbox： https ://codesandbox.io/s/competent-dream-8lcrt

我已經實現了一個帶有 React 上下文的模態，它公開了 1) 打開狀態 2) 模態配置 3) 一個打開和關閉方法

// ...

const onOpenDialog = (mode, config) => {
  setDialogMode(mode)
  if (config) {
    setDialogConfig(config);
  }
}

const onCloseDialog = () => {
  setDialogMode("");
  if (Object.keys(dialogConfig).length > 0) {
    setDialogConfig({})
  }
}

// ...

return (
  <Provider value={{ dialogMode, dialogConfig, onOpenDialog, onCloseDialog }}>
    {children}
  </Provider>
)

在主要組件中，我有一個 onClick 處理程序，它調用 onOpenDialog 方法並在其配置對象中傳遞onSubmit和onClose回調（這個 onCloseDialog 回調是問題）

const { onOpenDialog, onCloseDialog } = useDialog()

// ...

const onClick = () => {
  onOpenDialog("add", {
    data: null,
    onSubmit: (data) => {
      console.log("Form Data: ", data)
    },
    onCancel: onCloseDialog
  })
}

最后，我有一個 FormInModal 組件，它在點擊提交和關閉時調用在 dialogConfig 對象中傳遞的兩個回調。

const onSubmit = (data) => {
  dialogConfig.onSubmit({
    username: data.username,
    password: data.password
  })
}

const onCancel = () => {
  dialogConfig.onCancel()
}

重現步驟：

1. 點擊Open
2. 您應該在控制台中看到 1) 對話框打開 2) 傳遞給 Dialog 配置的配置輸入有數據、onSubmit 和 onCancel，配置輸入已設置為 dialogConfig 狀態
3. 單擊取消，您應該看到 1) 對話框關閉 2) 對話框配置狀態為空 3) 對話框配置狀態未重置

公平地說3.工作一半時間。 這很奇怪，因為 dialogConfig 狀態總是在對話框打開時更新。 你可以在 React Dev 工具上看到狀態只有一半的時間更新

Answer 1

當嘗試從函數閉包訪問狀態時，這是 React 中的一個已知問題。 舊狀態在閉包創建時被捕獲並由函數返回，即使狀態已更新。

解決該問題的一種方法是通過以下方式訪問更新的狀態：

setState(previousState => newState)而不是setState(newState)

反應社區的答案：讀取過時狀態的函數