Javascript 条件呈现在我的功能组件中不起作用

如果（age您实际上不需要状态，我将尝试呈现一个组件。只需使用

const uneligible=age即可{
var dateOfBirth=“2007-01-01”；
var split_dob=出生日期分割（“-”）；
var月=分割月[1]；
var日=分割日[2]；
var年=分割日[0]；
var dob_asdate=新日期（年、月、日）；
var today=新日期（）；
var mili_dif=Math.abs（today.getTime（）-dob_asdate.getTime（））；
风险期限=百万美元/（1000*3600*24*365.25）；
控制台日志（年龄）；
const uneligible=年龄<18岁；
返回(
{uneligible&&(
获取
出生日期
，并将
不可触发
设置为标准常量（
UseMoom
，以便在需要时进行轻微优化）。这将防止渲染设置状态的循环，设置状态会导致重新渲染，从而设置状态


const{usemo}=React；
常量配置文件页=（{dateOfBirth}）=>{
const uneligible=useMoom（（）=>{
const mili_dif=Math.abs（Date.now（）-Date.parse（dateOfBirth））；
常数=mili_dif/（1000*3600*24*365.25）；
返回年龄<18岁；
}，[出生日期]；
返回(
{uneligible&&(
这是一个错误警报-请查看！
)}
);
};
ReactDOM.render(
, 
根
)；
函数会一次又一次地重新呈现，因为您立即设置了状态。
解决方案：

import React from "react";

import Alert from "@material-ui/lab/Alert";

const ProfilePage = (props) => {
  
  const isEligible = () => {
    var dateOfBirth = "2007-01-01";
    var split_dob = dateOfBirth.split("-");
    var month = split_dob[1];
    var day = split_dob[2];
    var year = split_dob[0];
    var dob_asdate = new Date(year, month, day);
    var today = new Date();
    var mili_dif = Math.abs(today.getTime() - dob_asdate.getTime());
    var age = mili_dif / (1000 * 3600 * 24 * 365.25);
    console.log(age);
    return age < 18;
  }


  return (
    <div>
      {isEligible() && (
        <Alert variant="filled" severity="error">
          This is an error alert — check it out!
        </Alert>
      )}
    </div>
  );
};

export default ProfilePage;



从“React”导入React；
从“@material ui/lab/Alert”导入警报；
const ProfilePage=（道具）=>{
常数isEligible=（）=>{
var dateOfBirth=“2007-01-01”；
var split_dob=出生日期分割（“-”）；
var月=分割月[1]；
var日=分割日[2]；
var年=分割日[0]；
var dob_asdate=新日期（年、月、日）；
var today=新日期（）；
var mili_dif=Math.abs（today.getTime（）-dob_asdate.getTime（））；
风险期限=百万美元/（1000*3600*24*365.25）；
控制台日志（年龄）；
返回年龄<18岁；
}
返回(
{isEligible（）&&(
这是一个错误警报-请查看！
)}
);
};
导出默认配置文件页面；

const [uneligible,setEligible] = React.useState(
    false  // default value
    )

<div>{uneligible&& <Alert variant="filled" severity="error">
  This is an error alert — check it out!
</Alert>}</div>

const ProfilePage = (props) => {
  var dateOfBirth = "2007-01-01";
  var split_dob = dateOfBirth.split("-");
  var month = split_dob[1];
  var day = split_dob[2];
  var year = split_dob[0];
  var dob_asdate = new Date(year, month, day);
  var today = new Date();
  var mili_dif = Math.abs(today.getTime() - dob_asdate.getTime());
  var age = mili_dif / (1000 * 3600 * 24 * 365.25);
  console.log(age);
  const uneligible = age < 18;

  return (
    <div>
      {uneligible && (
        <Alert variant="filled" severity="error">
          This is an error alert — check it out!
        </Alert>
      )}
    </div>
  );
};

import React from "react";

import Alert from "@material-ui/lab/Alert";

const ProfilePage = (props) => {
  
  const isEligible = () => {
    var dateOfBirth = "2007-01-01";
    var split_dob = dateOfBirth.split("-");
    var month = split_dob[1];
    var day = split_dob[2];
    var year = split_dob[0];
    var dob_asdate = new Date(year, month, day);
    var today = new Date();
    var mili_dif = Math.abs(today.getTime() - dob_asdate.getTime());
    var age = mili_dif / (1000 * 3600 * 24 * 365.25);
    console.log(age);
    return age < 18;
  }


  return (
    <div>
      {isEligible() && (
        <Alert variant="filled" severity="error">
          This is an error alert — check it out!
        </Alert>
      )}
    </div>
  );
};

export default ProfilePage;