useEffect 函数 open/close 基于 props 的模态仅在第一次有效（点击）

Question

我正在学习 React 并使用文档中新实现的 "Hooks"。我在使用 useEffect() 函数时遇到模态（来自 Material UI 的对话框）和 open/close 函数的问题。

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

它已经帮助了我，我忘了使用 useEffect() 函数，而是我只是根据 props 的内容设置 useState。了解到useState只会执行一次来设置初始状态。但是我还有一个问题。

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

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

  function handleClose() {
    setOpen(false);
  }

当我单击添加按钮（在另一个组件中）并处理单击（它将状态更改为 true）并将其作为 props 传递给 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} />

Answer 1

我不确定我是否完全理解您要做什么，但我看到 useEffect 没有使用状态。为了 useEffect 被调用多次，你需要将状态传递给它，所以你的 [props.isOpen] 需要更改为 [open]

Answer 2

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

useEffect 函数 open/close 基于 props 的模态仅在第一次有效（点击）

useEffect function open/close modal based in props works only at first time (click)

reactjs

react-hooks