ReferenceError：在初始化React Collapse Component之前无法访问词法声明'useStyles'，axios获取数据材料ui useStyles

Posted 2023-02-22

【中文标题】ReferenceError：在初始化React Collapse Component之前无法访问词法声明\'useStyles\'，axios获取数据材料ui useStyles

【英文标题】：ReferenceError: can't access lexical declaration 'useStyles' before initialization React Collapse Component, axios get data material ui useStylesReferenceError：在初始化React Collapse Component之前无法访问词法声明'useStyles'，axios获取数据材料ui useStyles

【发布时间】：2021-12-08 12:29:42

【问题描述】：

我正在尝试从后端（带有对象的数组）渲染数据，并在 React 中使用材料 - ui 将部分数据隐藏在折叠按钮下。 如果我将所有行都写在一个组件中，代码就可以正常工作 - ShowMore。

但是当我尝试制作一个单独的组件时，事情变得很棘手，一个可重复使用的折叠按钮。

当我尝试传递子对象以呈现包装在 CollapseBtn 中的下载数据并更改样式时，我得到了 "ReferenceError: 在初始化之前不能访问词法声明'useStyles'"

这是主组件 ShowMore 中的代码

import CollapseBtn from "./components/CollapseBtn";
const ShowMore = () => 
  let myToken = JSON.parse(localStorage.getItem("auth"));
  const api = `https://someBackendAppLink`;
  const  download  = useLogic(api, myToken);

  return (
    <Page>
      <SG.Box>
        <S.Header>
          <S.Title h1 primary>
            Certifications
          </S.Title>
        </S.Header>
        download && (
          <div>
            <Typography>
              download.data.advancedProfile.certifications
                .slice(0, 4)
                .map((obj) => (
                  <S.CardDiv>
                    <div>obj.title</div> <div>obj.link</div>
                    <div>obj.category</div> <div>obj.date</div>
                  </S.CardDiv>
                ))
            </Typography>
            <CollapseBtn>
              <Typography>
                download.data.advancedProfile.certifications
                  .slice(4)
                  .map((obj) => (
                    <S.CardDiv>
                      <div>obj.title</div> <div>obj.link</div>
                      <div>obj.category</div> <div>obj.date</div>
                    </S.CardDiv>
                  ))
              </Typography>
            </CollapseBtn>
          </div>
        )
      </SG.Box>
    </Page>
  );
;

以及来自单独 Collapsebtn 的代码

import Collapse from "@material-ui/core/Collapse";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

const CollapseBtn = ( children ) => 
  const [expanded, setExpanded] = React.useState(false);
  const classes = useStyles();
  const useStyles = makeStyles((theme) => (
    expand: 
      transform: "rotate(0deg)",
      marginLeft: "auto",
      transition: theme.transitions.create("transform", 
        duration: theme.transitions.duration.shortest,
      ),
    ,
    expandOpen: 
      transform: "rotate(180deg)",
    ,
  ));
  const handleExpandClick = () => 
    setExpanded(!expanded);
  ;

  return (
    <>
      <IconButton
        className=clsx(classes.expand, 
          [classes.expandOpen]: expanded,
        )
        onClick=handleExpandClick
        aria-expanded=expanded
        aria-label="show more"
      >
        <ExpandMoreIcon />
      </IconButton>
      <Collapse in=expanded timeout="auto" unmountOnExit>
        children
      </Collapse>
    </>
  );
;

export default CollapseBtn;

这是在一个主要组件中制作的 WORKING 代码（而不是 Collapsebtn，我将所有隐藏对象包装在从材质 ui 折叠中）

const useStyles = makeStyles((theme) => (
  expand: 
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", 
      duration: theme.transitions.duration.shortest,
    ),
  ,
  expandOpen: 
    transform: "rotate(180deg)",
  ,
));

const ShowMore = ( className ) => 
  let myToken = JSON.parse(localStorage.getItem("auth"));
  const api = `https://someBackendApiData`;
  const  download  = useLogic(api, myToken);

  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => 
    setExpanded(!expanded);
  ;

  return (
    <Page>
      <SG.Box>
        <S.Header>
          <S.Title h1 primary>
            Certifications
          </S.Title>
        </S.Header>
        download && (
          <div>
            <Typography>
              download.data.advancedProfile.certifications
                .slice(0, 4)
                .map((obj) => (
                  <S.CardDiv>
                    <div>obj.title</div> <div>obj.link</div>
                    <div>obj.category</div> <div>obj.date</div>
                  </S.CardDiv>
                ))
            </Typography>

            <IconButton
              className=clsx(classes.expand, 
                [classes.expandOpen]: expanded,
              )
              onClick=handleExpandClick
              aria-expanded=expanded
              aria-label="show more"
            >
              <ExpandMoreIcon />
            </IconButton>
            <Collapse in=expanded timeout="auto" unmountOnExit>
              <CardContent>
                <Typography>
                  download.data.advancedProfile.certifications
                    .slice(4)
                    .map((obj) => (
                      <S.CardDiv>
                        <div>obj.title</div> <div>obj.link</div>
                        <div>obj.category</div> <div>obj.date</div>
                      </S.CardDiv>
                    ))
                </Typography>
              </CardContent>
            </Collapse>
          </div>
        )
      </SG.Box>
    </Page>
  );
;

怎么了？如何解决？

【问题讨论】：

您在声明之前调用了useStyles()。在makeStyles()的调用之后放置const classes = useStyles();

你说得对，我用的太早了。现在可以了。非常感谢。

【参考方案1】：

错误告诉你useStyles 没有初始化。意思是。函数应该在组件内部。

const ShowMore = ( className ) => 
const useStyles = makeStyles((theme) => (
      expand: 
        transform: "rotate(0deg)",
        marginLeft: "auto",
        transition: theme.transitions.create("transform", 
          duration: theme.transitions.duration.shortest,
        ),
      ,
      expandOpen: 
        transform: "rotate(180deg)",
      ,
    ));
  let myToken = JSON.parse(localStorage.getItem("auth"));
  const api = `https://someBackendApiData`;
  const  download  = useLogic(api, myToken);

  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => 
    setExpanded(!expanded);
  ;

  return (
    <Page>
      <SG.Box>
        <S.Header>
          <S.Title h1 primary>
            Certifications
          </S.Title>
        </S.Header>
        download && (
          <div>
            <Typography>
              download.data.advancedProfile.certifications
                .slice(0, 4)
                .map((obj) => (
                  <S.CardDiv>
                    <div>obj.title</div> <div>obj.link</div>
                    <div>obj.category</div> <div>obj.date</div>
                  </S.CardDiv>
                ))
            </Typography>

            <IconButton
              className=clsx(classes.expand, 
                [classes.expandOpen]: expanded,
              )
              onClick=handleExpandClick
              aria-expanded=expanded
              aria-label="show more"
            >
              <ExpandMoreIcon />
            </IconButton>
            <Collapse in=expanded timeout="auto" unmountOnExit>
              <CardContent>
                <Typography>
                  download.data.advancedProfile.certifications
                    .slice(4)
                    .map((obj) => (
                      <S.CardDiv>
                        <div>obj.title</div> <div>obj.link</div>
                        <div>obj.category</div> <div>obj.date</div>
                      </S.CardDiv>
                    ))
                </Typography>
              </CardContent>
            </Collapse>
          </div>
        )
      </SG.Box>
    </Page>
  );
;