反应弹出窗口未正确显示

Question

0

我在 React 中使用useState时遇到了一些问题。我有一个定制的组件Dialog可以作为道具传递renderAction和renderContent。

所以我设法打开了第一个对话框，一切似乎都井井有条，这是代码底部的<Dialog>标签。 但是在我从服务器得到响应后，我想显示第二个Dialog弹出窗口并关闭第一个Dialog弹出窗口。 但是在第一个消失之后，第二个就再也没有弹出过。

服务器调用成功，所以response.success是正确的，这就是为什么setPopupOpen=false(关闭第一个弹出窗口(有效的原因，但我不知道为什么，因为我设置了secondPopupOpen=true，但为什么相同的方法不起作用显示第二个对话框弹出窗口。

应用导航.js

const AppNav = () => {
//...
const [popupOpen, setPopupOpen] = useState(false);
const [secondPopupOpen, setSecondPopupOpen] = useState(false);
const [input, setInput] = useState('');
const renderContent = () => { 
return ( 
<form>
<input
type="text"
onChange={e => setInput(e.target.value)}
value={input}
onBlur={() =>delay(() =>setInput(''),150}
placeholder='placeholder here...'
/>
</form>
);
};
const renderAction = () => { 
const handleSubmit = async() => {
//some server calls here
// response is what got back from server call
try{
if(response.success){
setPopupOpen(false);
setSecondPopupOpen(true);
return (
<
<Dialog
open={secondPopupOpen}
renderContent={() => <span>Message:</span>}
renderAction={() => <span>operation successful!</span>}
/>
)
}
}
return ( 
<Button onClick={handleSubmit}>Submit</Button>
);
};
return (
<Dialog
open={popupOpen}
renderContent={RenderContent}
renderAction={RenderAction}
/>
)
}

Answer 1

您不需要两个Dialog组件。handleSubmit内的Dialog不工作的原因是它没有返回到功能组件，而只会返回到handleSubmit函数。

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

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

Answer 2

只需从句柄提交中删除 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 之前，它可能会被返回。