반응 재료-UI에서 사용가치를 설정할 수 없음

반응 재료-UI에서 사용가치를 설정할 수 없음

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;

다른 컴포넌트로부터 오픈 클로즈(open close)를 관리하기 위해 이 작업을 수행하며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);

을(를) 사용하여 Dialog open prop value에서 전달되는 값을 false로 설정하려고 하는데, 콘솔에서 클릭하는 중이지만 delaog가 호출되지 않는 경우, 또한 작업에서 를 수동으로 설정한 경우, 여기서 무슨 일이 벌어지는가?

문제는 소품들을 복사해서CustomDialog로 바뀐다는 뜻이지dilaogOpenProp부모에게 무시당하다.CustomDialog. (이것은 일반적으로 최선의 방법은 아니지만, 이치에 맞는 엣지 케이스가 있다.)그렇게 하니까.CustomDialog해당 프로펠러의 초기 값만 사용하고 상위 구성 요소가 프로펠러를 변경할 때 업데이트된 값은 사용하지 않는다.다음의 간단한 예를 들어보자.

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스스로를 닫을 수 있도록(대화에서 공통적으로), 부모가 제공하는 기능을 전달하면 된다.

자식 구성 요소의 상태를 부모 구성 요소에서 제공된 지원서에 따라 업데이트하려면useEffect. 소품 전달하고 있다useState하위 구성 요소에서 (React.useState(props.dilaogOpenProp)첫 번째 렌더에서만 작동하는:

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

useEffect(() => {
  // update the state every time the prop.dilaogOpenProp dependency changes
  setOpen(props.dilaogOpenProp);
}, [props.dilaogOpenProp]);

상태를 최신 상태로 유지해야 하며useState:

const CustomDialog = ({ dilaogOpenProp }) => {
  const [dialogOpenState, setOpen] = React.useState(dilaogOpenProp);

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

소품에서 직접 값을 얻을 수도 있다.

<Dialog open={props.dilaogOpenProp}>
    ...
</Dialog>

참조URL: https://stackoverflow.com/questions/69568213/not-able-to-setvalue-in-usestate-in-react-material-ui