状态更改不会影响React DOM

问题描述

我正在使用React Material UI。为了加载，我决定使用Skeleton结构。但是，状态更改不会影响骨架组件的宽度和高度，因此无法正常工作。

export default function ComplexGrid(props) {
  const [hover,setHover] = useState(false);
  const [article,setArticle] = useState("");
  const [year,setYear] = useState("");
  const [month,setMonth] = useState("");
  const [loaded,setLoaded] = useState(false);

  const [width,setWidth] = useState(null);
  const [height,setHeight] = useState(null);

  const skeletonStructure = useRef(null);

  const classes = useStyles();

  useEffect(() => {
    if (props.mainNew[0]) {
      setArticle(props.mainNew[0]);
      setYear(String(article.updated_at).split("-")[0]);
      setMonth(String(article.updated_at).split("-")[1]);
    }

    if (skeletonStructure.current) {
      setWidth(skeletonStructure.current.offsetWidth);
      setHeight(skeletonStructure.current.offsetHeight);
    }

    setTimeout(() => {
      setLoaded(true);
    },500);
  });

  const stylehvr = loaded && hover && article ? { cursor: "pointer",opacity: "60%",transition: "all 0.5s linear" } : {};
  const hoverbck = loaded && hover && article ? { backgroundColor: "black",cursor: "pointer" } : {};

  return (
    <div className={classes.root} onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)}>
      <Grid container spacing={2} className={classes.grd}>
        <div style={hoverbck}>
          {article && loaded ? (
            <img ref={skeletonStructure} className={classes.img} style={stylehvr} alt={article.title} src={article.img1} />
          ) : (
            <Skeleton variant="rect" width={width} height={height} animation="pulse" />
          )}

          {article && loaded ? (
            <Typography gutterBottom variant="subtitle1" className={classes.title}>
              {article.title} - {width} - {height}
            </Typography>
          ) : (
            ""
          )}

          {article && loaded ? (
            <Typography variant="body2" color="textSecondary" className={classes.date}>
              {month} / {year}
            </Typography>
          ) : (
            ""
          )}

          {article && loaded ? (
            <Typography variant="body2" color="textSecondary" className={classes.timer}>
              {article.read_time} Dakikalık Okuma
            </Typography>
          ) : (
            ""
          )}

          {article && loaded ? (
            <Typography variant="body2" className={classes.type}>
              {article.content_type}
            </Typography>
          ) : (
            ""
          )}
        </div>
      </Grid>
    </div>
  );
}

由于身高和体重的初始状态为“空”，因此骨架无法按预期工作，但是在useEffect中正确设置了身高和体重。如何为骨架组件使用正确的状态？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）