如何將 useState 掛鈎的 state 設置為 true

Question

在這里，我使用 useState 將 state '不合格' 設置為 false 作為開始

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

然后在這里我正在編寫 function 以將 state 設置為 true，這就是我收到錯誤的地方：

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

這就是錯誤：

這是將其設置為 true 的條件（如果用戶年齡 < 18 state 應該為 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();}

如果 state 成功設置為 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

您無需制作 function 即可更改 state

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

更新 State state

setEligible(true)

Answer 2

我的印象是您閱讀了兩種不同的反應方法並將它們混合到您的代碼中：舊的基於類（沒有鈎子但具有顯式狀態）和基於鈎子。 使用鈎子，您實際上並沒有 state，正如 Fahad 指出的那樣，您可以直接設置單個（狀態）變量。 如果您想保留現有的 object，您可以：

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

Answer 3

state.uneligible==='true'是一個條件，而不是賦值。

您應該更改以下行：

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

至

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

Answer 4

您將 state 變量名稱聲明為 state，這不是一個好的做法，也可能引發關鍵字錯誤。 相反，請使用符合條件的變量名稱。

像這樣定義 state：

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;
}