如何在 onClick 调用的函数上重新渲染 Header 功能组件答案

【问题标题】：How to Re-Render a Header functional component on a function called by onClick如何在 onClick 调用的函数上重新渲染 Header 功能组件
【发布时间】：2021-06-23 16:44:40
【问题描述】：

一些上下文：我在我的网络应用程序上使用 REACT 并设置了注销过程。当我点击注销按钮时，它会清理本地存储并注销。

问题：发生这种情况时，HEADER 组件会一直显示“会话链接”而不是“访客链接”。我了解重新渲染实际使用基于登录状态的三元组来决定显示哪些链接的标题组件。寻找如何做到这一点，我发现当您从功能组件更新状态时，它会导致重新渲染，但我不确定如何实现它。

希望这会带来足够的上下文，这里是代码：

function Header({authReducer}) {
    const history = useHistory();
     
    const handleLogout = () => {
      localStorage.removeItem("persist:auth");
      
      history.push("/home");
     
    }


    const useStyles = makeStyles((theme) => ({
        '@global': {
            ul: {
            margin: 0,
            padding: 0,
            listStyle: 'none',
            },
        },
        appBar: {
            borderBottom: `1px solid ${theme.palette.divider}`,
        },
        toolbar: {
            flexWrap: 'wrap',
        },
        toolbarTitle: {
            flexGrow: 1,
        },
        link: {
            margin: theme.spacing(1, 1.5),
        },
        heroContent: {
            padding: theme.spacing(8, 0, 6),
        }
    }));

  const classes = useStyles();

  const guestLinks = (
      <>
          <nav>
            <Link variant="button" color="textPrimary" href="/" className={classes.link}>
              Inicio
            </Link>
            <Link variant="button" color="textPrimary" href="/plans" className={classes.link}>
              Planes
            </Link>
            <Link variant="button" color="textPrimary" href="/contact" className={classes.link}>
              Contacto
            </Link>
          </nav>
          <Button href="login" color="primary" variant="outlined" className={classes.link}>
            Iniciar Sesión
          </Button>
      </>
  )

  const sessionLinks = (
      <>
          <nav>
            <Link variant="button" color="textPrimary" href="/binnacle" className={classes.link}>
              Bitácora
            </Link>
            <Link variant="button" color="textPrimary" href="/information" className={classes.link}>
              Información de la obra
            </Link>
            <Link variant="button" color="textPrimary" href="/financial" className={classes.link}>
              Información Financiera
            </Link>
            <Link variant="button" color="textPrimary" href="/support" className={classes.link}>
              Soporte
            </Link>
          </nav>
          <Button color="primary" variant="outlined" className={classes.link} onClick={handleLogout} >
            Salir
          </Button>
      </>
  )

  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar position="stick   y" color="default" elevation={0} className={classes.appBar}>
        <Toolbar className={classes.toolbar}>
          <Typography align="left" variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>
            Bitácora Online
          </Typography>
         {authReducer.isLoggedIn ? sessionLinks : guestLinks}
        </Toolbar>
      </AppBar>
    </React.Fragment>
    
  );
}

const mapStateToProps = (state) => ({
    authReducer: state.authReducer
  })

export default connect(mapStateToProps)(Header);

【问题讨论】：

有关更多信息，请参阅this issue。

标签： reactjs react-functional-component rerender

【解决方案1】：

您应该对条件会话链接和 gestlinks 使用 useState() 钩子，因为当它发生变化时，您可以进行渲染...

并检查您是否路由 /home 是否重定向到 /

例如我的感受：

const [checkLog,setCheckLog] = useState(false)
const HandleLogout =()=>{
 localStorage.... 
 setCheckLog(true)
}

//into return 

......
checkLog?<GuestLinks />: 
<SessionLinks />

No se si me entendió a lo que me refiero con usar states y un pequeño checker para que reaccione al 处理

【讨论】：