我正在嘗試使用 React 創建一個 MUI 對話框組件并從包裝組件管理它。這是我的例子：
import { Dialog, DialogActions, DialogTitle, DialogContent, Button } from "@material-ui/core";
import React, {useState, useEffect} from "react";
export default function MultiNote(props) {
const [useDialogOpen, setDialogOpen] = useState(false);
useEffect(() => {
setDialogOpen(!useDialogOpen);
}, [props.open]);
const handleDialogToggle = () => {
setDialogOpen(!useDialogOpen);
}
return (
<Dialog
open={useDialogOpen}
onClose={handleDialogToggle}
aria-labelledby="form-multinote-dialog"
>
<DialogTitle id="form-multinote-dialog">{props.title}</DialogTitle>
<DialogContent>Test</DialogContent>
<DialogActions>
<Button onClick={handleDialogToggle} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
);
}
在這里，我正在嘗試根據組件的 prop 的打開狀態更改 useDialogOpen 狀態。除了第一次渲染外，它作業得很好。在第一次渲染時，它會打開對話框。但我希望它被關閉。
我不明白為什么它會改變。
uj5u.com熱心網友回復：
我使用沙箱來測驗您的代碼。您的 useEffect 正在將 useDialogOpen 切換為 true。
我在你的 useEffect 中使用了一個 if 陳述句來讓它不顯示對話框：
useEffect(() => {
if (Object.keys(props).length !== 0) {
setDialogOpen(!useDialogOpen);
}
}, [props.open]);
這是有效的，因為它確認了一個 prop 實際上正在被傳遞到組件中，而不僅僅是一個空物件。
這是一個包含所有代碼的沙箱供您使用：
https://codesandbox.io/s/stoic-shaw-3dszx?file=/src/App.js:259-279
發生這種情況的原因是因為您正在觀察 props.open 的更改，因為它總是在渲染階段傳入。然后將您的 useDialog 切換為 true 并顯示對話框。
uj5u.com熱心網友回復：
回答你的第一個問題 - 為什么對話框在第一次渲染時打開？發生的事情是這樣的：
- 組件第一次呈現，并且
useDialogOpen是假的（因為它是用useState(false)）創建的，并且對話框已關閉）。 - 緊接著（可能如此之快以至于用戶無法感知），您的
useEffect運行和呼叫setDialogOpen(!useDialogOpen). 由于useDialogOpen當前為假，這與setDialogOpen(true) - 組件重新渲染
useDialogOpen為 true。
如果您希望對話框打開狀態由open道具控制，您可能需要考慮提升 state。例如，擺脫這個組件內的所有狀態，并向道具添加一個 onClose 事件。所以它看起來像這樣：
function MultiNote(props) {
return (
<Dialog
open={props.open}
onClose={props.onClose}
aria-labelledby="form-multinote-dialog"
>
<DialogTitle id="form-multinote-dialog">{props.title}</DialogTitle>
<DialogContent>Test</DialogContent>
<DialogActions>
<Button onClick={props.onClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
);
}
它可以像這樣使用：
function App() {
const [isOpen, setIsOpen] = useState(false);
return <MultiNote open={isOpen} onClose={() => setIsOpen(false)} />;
}
看到這個代碼和框
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/330796.html
標籤：javascript 反应