【问题标题】:I declared my variable with let but it is still not in global scope我用 let 声明了我的变量,但它仍然不在全局范围内
【发布时间】:2021-04-28 17:16:32
【问题描述】:

我试图让一个组件出现在 'uneligible=(age

    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>

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

因为这个问题,我没有使用有状态变量:conditional rendering is not working in my functional component

【问题讨论】:

  • 根据您提供的代码框,handleSaveGeneral 从未使用过,因此uneligible 永远不会被设置。
  • 首先,您永远不会调用您的函数,因此该值将始终未定义。其次,这不是 React 的工作方式。如果你想更新 DOM,你必须提交对 stateful 变量的更改,要么是 reducer,要么更常见的是 useState hook。一旦组件重新渲染,组件主体中声明的任何值都会丢失(或重置),因为它们属于先前的渲染。
  • 你为什么将handleSaveGeneral声明为async
  • 你可能应该看看更多的反应教程,因为你的代码充满了语法错误。在您的情况下,不合格是一个简单的变量,而不是有状态的变量。这意味着如果您更改它,您的组件将不会重新呈现
  • 大家请看更新后的问题

标签: javascript reactjs


【解决方案1】:

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

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

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

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

【讨论】:

    【解决方案2】:

    let 允许您声明仅限于使用它的块语句或表达式范围内的变量,这与 var 关键字不同,后者在全局或本地声明整个函数的变量,而不管块范围。

    就像const 一样,let 在全局声明时(在最顶层范围内)不会创建窗口对象的属性。

    要实现你想要的,你可以使用var / window.uneligible 而不是let

    【讨论】:

    • 我在沙箱里改成var还是不行
    • 我添加了一个按钮来使用它
    猜你喜欢
    • 2019-07-22
    • 1970-01-01
    • 2017-08-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-17
    • 1970-01-01
    • 2016-05-17
    相关资源
    最近更新 更多