React hooks：设置状态“ModalVisible”但状态不会立即更新

Question

I use setModalConfirmVisible(true) but the state modalConfirmVisible does not update immediately. So, Modal does not display.

How can I update this state immediately?

When I click Remove button. The console will show only false from

console.log(modalConfirmVisible)

  useEffect(() => {
    (async () => {
      try {
        setFetchLoading(true)
        setTransactions(await fetchTransactions())
        setFetchLoading(false)
      } catch (err) {
        console.error(err)
      }
    })()
  }, [modalConfirmVisible])

  async function handleRemoveTransaction(id) {
    setRemoveLoading(true)
    setModalConfirmVisible(true)
    console.log(modalConfirmVisible)
    await handleConfirmRemoveTransaction(true, id)
  }


  return (
    {modalConfirmVisible && (
      <ModalConfirm
        onConfirmRemove={handleConfirmRemoveTransaction}
        onCancel={() => setModalConfirmVisible(false)}
        visible={true} 
      />
    )}
  )


// ModalConfirm.js
const ModalConfirm = ({ onConfirmRemove, visible }) => {
  return (
    <Modal
      visible={visible}
      title="Do you want to delete these items?"
      icon={<ExclamationCircleOutlined />}
      content="When clicked the OK button, this dialog will be closed after 1 second"
      onOk={() => onConfirmRemove(true)}
      onCancel={() => onConfirmRemove(false)}
    />
  )
}

Answer 1

You should try to split out the logic of opening your modal from handling the confirmation. This allows the state update to set modalConfirmVisible and then on the next render cycle the confirmModal can open.

// from component in screen cap click remove, just open the modal
function openRemoveConfirmation() {
  setRemoveLoading(true)
  setModalConfirmVisible(true)
}

// handle confirmation separately
function handleRemoveTransaction(id) {
  handleConfirmRemoveTransaction(true, id)
}

return (
  {modalConfirmVisible && (
    <ModalConfirm
      onConfirmRemove={handleConfirmRemoveTransaction}
      onCancel={() => setModalConfirmVisible(false)}
      visible={true} 
    />
  )}
)

Answer 2

Because you are using react-hooks, so you change any state immediately.

The right way is to check the value of modalConfirmVisible in the next cycle . And because you setState and the state is changed, the function will execute again:

const [modalConfirmVisible, setModalConfirmVisible] = useState(false);

async function handleRemoveTransaction(id) {
  setRemoveLoading(true)
  setModalConfirmVisible(true)
  await handleConfirmRemoveTransaction(true, id)
}
console.log(modalConfirmVisible)