useEffect函数在道具中基于打开/关闭模式仅在第一次工作(单击)

Question

我学习React并使用文档中新实现的"Hooks"。我在模态(来自材料 UI 的对话框)和使用 useEffect() 函数的打开/关闭函数时遇到了问题。

我已经阅读了这两篇文章：React.useState 不会从 props 重新加载状态和如何使用 React hook 将 props 同步到状态：setState()

它已经帮助了我，我忘记使用 useEffect() 函数，而我只是从来自 props 的内容中设置 useState。已了解 useState 将仅执行一次以设置初始状态。但是我还有一个问题。

function AddItemModal(props) {
const [open, setOpen] = useState(props.isOpen);
useEffect(() => {
setOpen(props.isOpen);
}, [props.isOpen]);
function handleClose() {
setOpen(false);
}

当我单击添加按钮(在另一个组件中)并处理单击(它将状态更改为 true)并将其作为道具传递给模态时，这是第一次工作。但是当我在关闭时单击(在模态中)并尝试单击添加以再次打开它时，没有任何反应。如果需要，这是我处理单击并调用模态的组件中的代码。

function ItemsTable() {
const [addModalOpen, setAddModalOpen] = React.useState(false);
const handleAddClick = () => {
setAddModalOpen(true);
};
<Box mt={4} position="fixed" bottom={10} right={10}>
<Fab color="secondary" aria-label="Add" onClick={handleAddClick}>
<AddIcon />
</Fab>
</Box>
<AddItemModal isOpen={addModalOpen} />

Answer 1

您将模态状态拆分为两个组件，这令人困惑，并会导致这样的错误。您应该将状态放在一个位置，并在必要时对其进行更新。在这种情况下，可以将模态状态保留在ItemsTable中，并传入一个处理程序供模态访问。

像这样：

function ItemsTable() {
const [addModalOpen, setAddModalOpen] = React.useState(false);
const handleAddClick = () => {
setAddModalOpen(true);
};
const handleClose = ()=>{
setAddModalOpen(false)
}
<Box mt={4} position="fixed" bottom={10} right={10}>
<Fab color="secondary" aria-label="Add" onClick={handleAddClick}>
<AddIcon />
</Fab>
</Box>
<AddItemModal isOpen={addModalOpen} handleClose={handleClose}/>

Answer 2

我不确定我是否确切地理解你想做什么，但我看到useEffect不使用状态。为了useEffect多次调用，您需要将状态传递给它，因此您的[props.isOpen]需要更改为[open]