gpt4 book ai didi

reactjs - 基于 props 的 useEffect 函数打开/关闭模态仅在第一次起作用(单击)

转载 作者:行者123 更新时间:2023-12-04 02:48:11 25 4
gpt4 key购买 nike

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

我已经阅读了这两篇文章:React.useState does not reload state from propsHow to sync props to state using React hook : 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)并将其作为 Prop 传递给模态时,这是第一次起作用。但是,当我在关闭时单击(模态)并尝试单击添加以再次打开它时,没有任何 react 。如果需要,这里是我处理单击并调用模态的组件中的代码。
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} />

最佳答案

您已将模态状态拆分为两个组件,这令人困惑并会导致此类错误。你应该把状态放在一个地方,并在必要时更新它。在这种情况下,您可以将模态状态保持在 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}/>

关于reactjs - 基于 props 的 useEffect 函数打开/关闭模态仅在第一次起作用(单击),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56342201/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com