如何将 useState 钩子的状态设置为 true

Question

这里我使用 useState 将状态“不合格”设置为 false 作为开始

    const [state,setState] = React.useState({
   
    uneligible: false,
  
  })

然后我正在编写一个函数来将状态设置为 true，这就是我收到错误的地方：

 function setEligibility(){state.uneligible==='true'}

这就是错误：

这里是将其设置为 true 的条件（如果用户年龄< 18 状态应为 true）：

 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);
if(age<18){setEligibility();}

如果状态成功设置为 true（如果用户的年龄 <18），我将调用它来显示警报组件：

 <Grid item xs={8} style={{marginTop:"10px"}}>{state.uneligible&&<Alert variant="filled" severity="error">
  This is an error alert — check it out!
</Alert>}</Grid>
                   

我需要帮助修复错误并使警报组件出现

Answer 1

你不需要做一个函数来改变状态

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

更新状态

setEligible(true)

Answer 2

我的印象是您阅读了两种不同的 React 方法并将它们混合在您的代码中：旧的基于类（没有钩子但具有显式状态）和基于钩子的。使用钩子，您实际上没有状态，正如 Fahad 指出的那样，您可以直接设置单个（状态）变量。如果你想保留你拥有的对象，你会这样做：

function setEligibility() { 
   setState({uneligible: true});
}

Answer 3

state.uneligible==='true' 是一个条件，而不是赋值。

您应该更改以下行：

function setEligibility(){state.uneligible==='true'}

到

function setEligibility(){state.uneligible = 'true'}

Answer 4

您将状态变量名称声明为状态，这不是一个好习惯，并且还可能引发关键字错误。相反，使用符合条件的变量名称。

像这样定义状态：

const [uneligible, setUneligible] = React.useState(false);

设置条件会变成这样：

var split_dob = dateOfBirth.split('-');
var dob_asdate = new Date(split_dob[0], split_dob[1], split_dob[2]);
var today = new Date();
var mili_dif = Math.abs(today.getTime() - dob_asdate.getTime());
var age = mili_dif / (1000 * 3600 * 24 * 365.25);
if (age < 18) {
  setUneligible(true);
}

如果 Uneligibile 设置为 false，则您渲染的是一个似乎不正常的空 Grid。而是：

if (uneligible) {
  return (
    <Grid item xs={8} style={{ marginTop: '10px' }}>
      <Alert variant="filled" severity="error">
        This is an error alert — check it out!
      </Alert>
    </Grid>
  );
} else {
  return null;
}