javascript - 我用 let 声明了我的变量，但它仍然不在全局范围内

Question

我试图让一个组件出现在“不合格=（年龄<18）”的情况下，所以我尝试在他的函数范围之外声明不合格并用 let 声明它，因为我知道该值稍后会改变

    let uneligible;
  const handleSaveGeneral = async (e) => {
    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);
    uneligible = age < 18;
  };

现在它在组件周围的语法中未定义，并且组件没有出现

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

沙牛代码：https://codesandbox.io/s/serverless-wave-qyuc4?file=/src/App.js: 602-767

由于这个问题，我没有使用有状态变量：条件渲染在我的功能组件中不起作用

标签： javascriptreactjs

Answer 1

查看 react docs 以了解它的生态系统如何围绕状态旋转。您的代码应与给定的详细信息类似 - https://codesandbox.io/s/quirky-buck-s2qvo

您可以在有特定事件时调用相同的函数，而不是使用 useEffect，例如click按钮单击事件。

关于您更新的问题-您一次又一次地设置状态，因为由于设置状态而导致的每次渲染都会再次调用状态更新器函数并且它将继续......如果您想要一次性初始值，这不是您想要的在根本没有处理程序的地方渲染。

但是现在由于您将通过函数处理程序处理警报的可见性，因此您有责任向此组件添加某种状态，以便在该处理程序内部更新可见性状态并显示您的警报。