Question

0

我在React中使用useState遇到了一些问题。我有一个自定义组件Dialog，可以将renderAction和renderContent传递为道具。

因此，我设法打开了第一个对话框，一切似乎都按顺序进行，这是代码底部的<Dialog>标签。但是从服务器返回响应后，我想显示第二个Dialog弹出窗口并关闭第一个Dialog弹出窗口。但是第一个消失后，第二个就再也不会弹出。

服务器调用成功完成，因此response.success是正确的，这就是setPopupOpen=false（关闭第一个弹出窗口）起作用的原因，但是我不知道为什么，因为我已经设置了{{1 }}，但是为什么相同的方法无法显示第二个对话框弹出窗口。

AppNav.js

secondPopupOpen=true

Answer 1

您不需要两个Dialog组件。 Dialog中的handleSubmit无法正常工作的原因是，它没有返回到功能组件，而仅返回了handleSubmit函数。

执行此操作的一种方法是在状态上保存renderContent和renderAction并将其传递给组件中返回的Dialog（在文件末尾））。

但是，您不想在该状态下存储JSX。尝试仅保存要在状态下显示的文本，例如Message而不是<span>{Message}</span>

Answer 2

只需从handle提交中删除return语句，然后将第二个对话框添加到第一个对话框的下方即可。

return (
  <>
   <Dialog
     open={popupOpen}
     renderContent={RenderContent}
     renderAction={RenderAction}
   />
   <Dialog
     open={secondPopupOpen}
     renderContent={() => <span>Message:</span>}
     renderAction={() => <span>operation successful!</span>}
     />
  </>
)

以前您的第二个对话框没有显示，可能有两个原因。第一个可能是因为您将其返回到第一个对话框的renderAction，并且第一个对话框在该时间点已关闭。
第二个是setState为asynchronous，因此在将secondPopupOpen设置为true之前，它有可能会返回。

反应弹出窗口无法正确显示

2 个答案: