时间戳

首页 > 解决方案 > React Hooks：状态落后了一步

reactjs - React Hooks：状态落后了一步

问题描述

我有一个在点击事件时打开的模式。它获取事件数据（日期和时间字符串）并将其显示在模式中。问题是我的状态总是落后一步。模态显示的内容始终处于以前的状态。当我关闭模式并重新打开它时，它会呈现内容，但它是上一个事件。如何解决这个问题？我使用反应钩子错了吗？我不能发布整个代码，因为它非常大，所以我只是发布我使用钩子的部分，如果您需要更多信息，请告诉我，我会提供。

  const [isModalVisible, setIsModalVisible] = useState(false)
  const [modelContent, setModalContent] = useState('')
  const [modalTitle, setModalTitle] = useState('')
 

const handleEventAdd = (e) => {
    form.resetFields()
    setModalTitle('Add an Event')
    const event = _.cloneDeep(e)
      form.setFieldsValue({
        datePicker: dateString,
        timeRangePicker: [dateString, eventEnd.date],
      })
    }
    const content = () => (
      <div>
        <Form
          form={form}
          initialValues={{
            datePicker: moment(e.start),
            timeRangePicker: [moment(e.start), moment(e.end)],
          }}
        >
                  <Form.Item name="datePicker" label="Current Event Date">
                    <DatePicker
                      className="w-100"
                      format={preferredDateFormat}
                      onChange={setValueDate}
                    />
                  </Form.Item>
          <Form.Item>
            <Button
              onClick={() => {
                form
                  .validateFields()
                  .then((values) => {
                    form.resetFields()
                  })
              }}
            >
              Add Event
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
    setModalContent(content)
    setIsModalVisible(true)
  }

const handleModalClose = () => {
    setIsModalVisible(false)
    form.resetFields()
    setModalContent('')
  }

更新:: 我的返回函数包括，

<Modal visible={isModalVisible} footer={null} onCancel={handleModalClose} title={modalTitle}>
    {modelContent}
  </Modal>

标签： reactjsreact-hooks

解决方案

这个问题是由于setState. 此方法生成“待定状态转换”（有关更多信息，请参阅此内容）。为了解决这个问题，你有两个选择：

  1. 使用ref而不是state. 与 相比state，ref具有同步行为。我为自己开发了一个示例，您可以在此处查看。您可以看到状态中存在异步行为（对话框与网页中）。 在此处输入图像描述
  2. 您可以将新状态值作为引发事件的一部分显式传递。

推荐阅读