【发布时间】: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,要么更常见的是
useStatehook。一旦组件重新渲染,组件主体中声明的任何值都会丢失(或重置),因为它们属于先前的渲染。 -
你为什么将
handleSaveGeneral声明为async? -
你可能应该看看更多的反应教程,因为你的代码充满了语法错误。在您的情况下,不合格是一个简单的变量,而不是有状态的变量。这意味着如果您更改它,您的组件将不会重新呈现
-
大家请看更新后的问题
标签: javascript reactjs