React中如何根据函数返回值显隐按钮？datecheck函数调用异常排查

问题根源分析 #

你的代码存在三个核心问题导致逻辑失效：

1. 未调用函数直接比较：你在JSX里拿函数对象datecheck和true对比，函数本身是一个对象，永远不可能等于布尔值true，必须调用函数才能拿到返回值。
2. 异步函数返回Promise而非布尔值：datecheck是async函数，调用后会返回Promise对象，不是直接的true/false，JSX同步渲染逻辑无法直接处理Promise结果。
3. JSX中不能直接处理异步逻辑：React渲染是同步过程，异步操作的结果必须通过状态变量来管理，不能直接在渲染表达式中使用。

修复方案 #

第一步：优化日期检查函数

如果getDateFormat是同步函数，完全不需要async，改成同步函数更简洁：

const datecheck = () => {
  const current = moment().format('DD/MM/YYYY');
  const endDate = getDateFormat(endTime);
  // 用严格相等===避免隐式类型转换bug
  return current === endDate;
};

如果getDateFormat是异步函数，保留async并加上await获取结果：

const datecheck = async () => {
  const current = moment().format('DD/MM/YYYY');
  const endDate = await getDateFormat(endTime);
  return current === endDate;
};

第二步：用状态管理显隐状态

通过useState定义状态变量，用useEffect触发日期检查并更新状态：

import { useState, useEffect } from 'react';

// 组件内部
const [showButton, setShowButton] = useState(false);

useEffect(() => {
  const checkAndUpdate = async () => {
    // 同步函数直接调用，异步函数加await
    const result = await datecheck();
    setShowButton(result);
  };

  checkAndUpdate();
  // 若endTime动态变化，加入依赖数组确保重新检查
}, [endTime]);

第三步：在JSX中使用状态控制显隐

{showButton ? (
  <Grid container style={{ justifyContent: 'center', paddingBottom: 10 }}>
    <Grid item className="" />
    <Grid item>
      <Typography>
        {user && user.Type === KEY_USER_TYPE.faculty ? (
          <Button
            variant="contained"
            target="_blank" {/* 修正target值，原"blank"无效 */}
            color="primary"
            onClick={onStartClass}
          >
            {t('labels:Start_clas')}
          </Button>
        ) : user && user.Type === KEY_USER_TYPE.student ? (
          <Button
            variant="contained"
            target="_blank"
            color="primary"
            onClick={onJoinClass}
          >
            {t('labels:Join_Class')}
          </Button>
        ) : null}
      </Typography>
    </Grid>
  </Grid>
) : null} {/* 用null代替空字符串，符合React渲染规范 */}

额外注意点 #

• target属性值应为_blank（下划线开头），否则无法正确打开新窗口。
• 用===替代==，避免因类型转换导致的意外错误。
• 如果endTime是动态更新的，一定要把它加入useEffect的依赖数组，保证日期检查逻辑会重新执行。

内容的提问来源于stack exchange，提问作者Sundar Anbu