尝试在带有MUI的React中使用useState对数组中的交替项进行条件渲染css

如何解决尝试在带有MUI的React中使用useState对数组中的交替项进行条件渲染css

我有一个映射的数组对象称为useState，在替代项目上，我希望CSS有条件地呈现，以免重复太多代码。在handleSide函数中使用too many rerenders时出现错误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> ); }; 。我该如何解决这个问题，或者在映射对象数组时有更好的渲染jsx的解决方案。

Launching lib/main.dart on iPhone 11 in debug mode...
Running Xcode build...
Xcode build done.                                           105.2s
Failed to build iOS app
Could not build the application for the simulator.
Error launching application on iPhone 11.
Error output from Xcode build:
↳
** BUILD FAILED **


Xcode's output:
↳
Command CompileSwift failed with a nonzero exit code
/Users/{name}/AndroidStudioProjects/{project-name}/build/ios/Debug-iphonesimulator/permission_handler/permission_handler.framework: replacing existing signature
/Users/{name}/AndroidStudioProjects/{project-name}/build/ios/Debug-iphonesimulator/permission_handler/permission_handler.framework: resource fork,Finder information,or similar detritus not allowed
Command CodeSign failed with a nonzero exit code
note: Using new build system
note: Building targets in parallel
note: Planning build
note: Constructing build description

在此先感谢您的帮助！

解决方法

您不能在render方法内调用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>
  );
};