javascript - 无法在 React Material-UI 的 useState 中设置值

Question

我在 Material-UI 中创建了一个自定义对话框组件

const CustomDialog = (props) => {

  const [dialogOpenState, setOpen] = React.useState(props.dilaogOpenProp);

  return (
    <>
      <CssBaseline />
      <Dialog
        fullWidth
        onClose={() => {}}
        open={dialogOpenState}
        maxWidth="xs"
        sx={{
          backdropFilter: "blur(5px)",
        }}
      >
        <DialogTitle>Example Dialog</DialogTitle>
        <DialogContent>Example Content Here</DialogContent>
        <DialogActions>
          <Button>ooooh.</Button>
        </DialogActions>
      </Dialog>
      <Box
        sx={{
          minHeight: "100vh",
          background:
            "url(https://source.unsplash.com/random) no-repeat center center",
          backgroundSize: "cover",
        }}
      ></Box>
    </>
  );
}


export default CustomDialog;

我正在尝试使用 useState

从另一个组件管理打开关闭

const Minidrawer = props => {
  const theme = useTheme();
  const { history } = props;
  const [open, setOpen] = React.useState(false);
  const [dialogOpen,setDialogueOpen] = React.useState(false)

  const handleDialogueOpen = () => {
    console.log("clicked");
    setDialogueOpen(true)
  }

  return (
    <Box sx={{ display: 'flex' }}>
      
      <AppBar position="fixed" open={open}>

        <Toolbar>
          <Typography variant="h6" noWrap component="div">
            COMPANY NAME
          </Typography>
          <Button onClick={handleDialogueOpen}>Filter</Button>
        </Toolbar>
      </AppBar>
      


      <CustomDialog dilaogOpenProp={dialogOpen}/>

    </Box>
  );
}

export default withRouter(Minidrawer);

我正在尝试使用 useState 将在 Dialog open 属性值中传递的 dialogOpen 设置为 false ，我在控制台中被点击但 dilaog 没有被调用，如果我在 useState 中手动设置 dialogOpen它可以工作但不能点击，这是怎么回事？

Answer 1

问题是您正在将 Prop 复制到 CustomDialog 中的状态。这意味着 CustomDialog 会忽略父级中对 dilaogOpenProp 的更改。 (这通常是 not best practice ，但在某些边缘情况下它是有意义的。)既然你这样做了，CustomDialog 只使用该 Prop 的 initial 值，而不是当您的父组件更改它时更新的值。这是一个更简单的例子来证明这一点:

const {useState} = React;

const Child = (props) => {
    const [childValue, setChildValue] = useState(props.parentValue);
    return <div>
        <div><code>props.parentValue = {String(props.parentValue)}</code></div>
        <div><code>childValue = {String(childValue)}</code></div>
    </div>;
};

const Parent = () => {
    const [parentValue, setParentValue] = useState(false);

    const toggleParentValue = () => setParentValue(v => !v);

    return <div>
        <Child parentValue={parentValue} />
        <div>
            <button onClick={toggleParentValue}>
                Toggle <code>parentValue</code>
            </button>
        </div>
    </div>;
};

ReactDOM.render(<Parent />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

您需要或者将打开/关闭状态存储在父级中并让父级控制它，或者将打开/关闭状态存储在CustomDialog 并让 CustomDialog 控制它。你不能两者兼顾。

通常这意味着让父级处于控制之中，但将一个函数传递给子级，子级可以使用该函数将更改告知父级。例如，如果您需要 CustomDialog 能够自行关闭(在对话框中很常见)，您可以向它传递一个父级提供的函数来执行此操作。