Reactjs 基于道具的useEffect功能打开/关闭模式仅在第一次使用时有效（单击）

我正在学习和使用文档中新实现的“挂钩”。我发现一个模态（来自Material UI的对话框）和使用useffect（）函数的打开/关闭函数有问题

我已经阅读了这两篇文章：和

这已经帮了我的忙，我忘记了使用useffect（）函数，而只是根据道具设置了useState。了解到useState将只执行一次以设置初始状态。但我还有一个问题

function AddItemModal(props) {
  const [open, setOpen] = useState(props.isOpen);

  useEffect(() => {
    setOpen(props.isOpen);
  }, [props.isOpen]);

  function handleClose() {
    setOpen(false);
  }

这是我第一次点击add按钮（在另一个组件中）并处理点击（它将状态更改为true），然后将其作为道具传递给Modal。但当我在关闭时单击（在模式中）并尝试在添加时单击以再次打开它时，什么也没有发生。如果需要，下面是我处理单击并调用模态的组件中的代码

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（）{
常量[addModalOpen，setAddModalOpen]=React.useState（false）；
const handleAddClick=（）=>{
setAddModalOpen（真）；
};

我不确定我是否完全理解您想要做什么，但我发现

useffect

不使用状态。为了多次调用

useffect

，您需要将状态传递给它，因此您的

[props.isOpen]

需要更改为

[open]

您已将模态状态分为两个组件，这会造成混淆，并导致类似的错误。您应该将状态放在一个位置，并在必要时进行更新。在这种情况下，您可以将模态状态保留在

项稳定的

中，并传入一个处理程序，以便模态访问

比如：

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}/>

函数ItemsTable（）{
常量[addModalOpen，setAddModalOpen]=React.useState（false）；
const handleAddClick=（）=>{
setAddModalOpen（真）；
};
常量handleClose=（）=>{
setAddModalOpen（错误）
}

你确定ItemsTable在你期望的时候正在重新渲染，addModalOpen就是你期望的吗？你好Dominic，尝试了一些控制台。logs:ItemsTable.js:39 addModalOpen state:false ItemsTable.js:42处理单击add按钮并设置addModalOpen ItemsTable.js:39 addModalOpen state:Truehm奇怪的是，你的代码看起来还不错，effect应该运行并更改状态，如果prop更改Shello Dominic，更多关于调试的信息，我发现表是问题所在该表不会重新渲染，并且在表中isOpen始终为真，单击按钮后，状态不会发生任何变化Hello Marios！感谢您的回复。因此，我已按您所说的那样尝试：setOpen（props.isOpen）仍然相同，此处：[open]而不是props。现在，开发人员控制台显示以下警告：React Hook useEffect缺少依赖项：“props.isOpen”。包括它或删除依赖项数组。如果“setOpen”需要当前值“props.isOpen”，您也可以切换到useReducer而不是useState，并在React hooks/ex中读取“props.isOpen”hausive dep如果你不能理解的话，很抱歉，我尽量说清楚。在简历中：有一个组件（可以作为显示结果的表格）还有一个按钮可以向其中添加新记录。这些按钮调用modal.React遵循自上而下的体系结构，这意味着当状态更改时，组件只更新自身及其子组件。通过添加useEffect，您只更新AddItemModal组件，而不通知父组件。使用回调，如建议的答案，从父组件处理状态，并允许对子组件进行更改。我希望这个答案会有所帮助。嗨，Marios。请投票：）谢谢你的解释。明白了！你好，威尔。哇！太好了。我差一点了哈哈。我的错误是将handleClose放在模式中，而不是放在表中。谢谢你的提示！只想知道我如果在我现在使用的模式中这样做是正确的（它有效，我只想知道它是否是常用的方法）：open={props.isOpen}onClose={props.handleClose}是的，这种反转控制模式是推荐的方法^