Блог

У меня есть объект arrays, который я отображаю поверх вызываемого featuredProj , и для альтернативных элементов я хочу, чтобы CSS отображался условно, чтобы не повторять так много кода. Используя useState в handleSide функции, я получаю ошибку too many rerenders . Как я могу это решить, или есть лучшее решение для рендеринга jsx при отображении по массиву объектов.

 const useStyles = makeStyles(() => ({
  title: {
    textAlign: (side) => (side ? "right" : "left"),
  },
}));

const FeaturedProjects = () => {
  const [side, setSide] = useState(true);
  const classes = useStyles(side);

  const handleSide = (project, index) => {
    if (index === 0 || index % 2 === 0) {

// I tried setSide(false), setSide(prev => !prev)
        
      return (
        <Grid Container key={index}>
              <Typography className={classes.title}>{project.title}</Typography>
        </Grid>
      );
    } else {
      return (
        <Grid Container key={index}>
              <Typography className={classes.title}>{project.title}</Typography>
        </Grid>
      );
    }
  };

  return (
    <Container>
      {featuredProj.map((proj, ind) => (
        <Reveal duration="2000" effect="fadeInUp">
          {handleSide(proj, ind)}
        </Reveal>
      ))}
    </Container>
  );
};
  

Заранее спасибо за любую помощь!

Вы не можете вызвать setState() метод рендеринга внутри. setState() вызовет повторный рендеринг, который снова вызывает метод render, который приводит к другому setState() .. вы поняли идею.

Если вы хотите, чтобы это работало, вам нужно создать отдельный компонент с side реквизитами и передать его в качестве аргумента вашему стилевому хукуку.

 const FeaturedProjects = () => {
  const classes = useStyles(side);

  return (
    <Container>
      {featuredProj.map((proj, ind) => (
        <FeaturedProjectItem
          key={index}
          project={proj}
          side={index === 0 || index % 2 === 0}
        />
      ))}
    </Container>
  );
};

const useStyles = makeStyles({
  title: {
    textAlign: (side) => (side ? "right" : "left"),
  },
});
const FeaturedProjectItem = ({ side, project }) => {
  const classes = useStyles(side);

  return (
    <Reveal duration="2000" effect="fadeInUp">
      <Grid Container>
        <Typography className={classes.title}>{project.title}</Typography>
      </Grid>
    </Reveal>
  );
};