React hooks: установить состояние «ModalVisible», но состояние не обновляется немедленно

Question

Я использую setModalConfirmVisible (true), но состояние modalConfirmVisible обновляется не сразу. Итак, Модал не отображается.

Как я могу немедленно обновить это состояние?

Когда я нажимаю кнопку Удалить. Консоль будет показывать только false из

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

Вы должны попытаться отделить логи c от открытия ваш модал от обработки подтверждения. Это позволяет обновлению состояния устанавливать modalConfirmVisible и , а затем в следующем цикле рендеринга, который может открыть confirmModal.

// 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

Поскольку вы используете реакционные хуки, вы немедленно изменяете любой state.

Правильный способ - проверить значение modalConfirmVisible в следующем cycle. А поскольку у вас setState и состояние изменилось, функция снова запустится:

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

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