React Hooks：状态落后了一步答案

【问题标题】：React Hooks: State is one step behindReact Hooks：状态落后了一步
【发布时间】：2021-09-27 01:21:40
【问题描述】：

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

  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>

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

这个问题是由于setState 的异步行为造成的。此方法生成“待定状态转换”（有关更多信息，请参阅this）。为了解决这个问题，您有两种选择：

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

【讨论】：

感谢您提供的信息，它真的很有帮助。你能解释一下第二个选项吗？根据我的示例，我将如何显式传递新的状态值。
乐于助人。当然，在第二个选项中，您应该将数据直接提供给您想要其数据的函数（例如，我认为您在 handleEventAdd 中使用此数据）并且不要使用 state 进行数据传递。如果您有任何问题，请告诉我。
我已经更新了我的代码，以便您可以看到渲染模式。因此，每当用户触发点击时，它都会调用 handleEventAdd 并将我的 Modal 设置为可见。我将如何正确实现这一点？
@WildThing 我的回答对你有帮助吗？
哦，我明白了，根据您的应用程序，这可能具有挑战性。但是，我认为您需要将组件作为modal 而不是像isModalVisible 那样检查boolean 变量直接传递其数据（包括其可见性和内容），这样您就可以处理您的问题。如果我的回答对您有所帮助，如果您将其标记为解决方案，我将不胜感激。