條件渲染在我的功能組件中不起作用

Question

我正在嘗試在下一個代碼塊中呈現組件 if (age<18)

 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){setEligible(true)}

這是 useState 鈎子：

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

這就是我試圖渲染它的方式：

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

在實際項目中沒有錯誤，只是組件沒有渲染，我在這里做了代碼的最小化版本，但渲染仍然有問題： https://codesandbox.io/s/thirsty-sara-jiomm?file=/src /App.js

Answer 1

您實際上並不需要 state 。 只需使用const uneligible = age<18並擺脫useState代碼，它就可以正常工作。 如果您在uneligible中輸入不合格，您將創建一個渲染循環，因為設置它會觸發重新渲染，這會再次設置 state 並觸發另一個重新渲染等。

const ProfilePage = (props) => {
  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);
  const uneligible = age < 18;

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

沙盒示例

Answer 2

獲取dateOfBirth ，並將uneligible設置為標准 const （如果需要， useMemo進行輕微優化）。 這將防止渲染設置 state 和設置 state 導致重新渲染的循環，從而設置 state...

 const { useMemo } = React; const ProfilePage = ({ dateOfBirth }) => { const uneligible = useMemo(() => { const mili_dif = Math.abs(Date.now() - Date.parse(dateOfBirth)); const age = mili_dif / (1000 * 3600 * 24 * 365.25); return age < 18; }, [dateOfBirth]); return ( <div> {uneligible && ( <div variant="filled" severity="error"> This is an error alert — check it out; </div> )} </div> ); }. ReactDOM,render( <ProfilePage dateOfBirth="2007-01-01" />; root );

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 3

function 一次又一次地重新渲染，因為您立即設置了 state。 解決方案：

import React from "react";

import Alert from "@material-ui/lab/Alert";

const ProfilePage = (props) => {
  
  const isEligible = () => {
    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);
    return age < 18;
  }


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

export default ProfilePage;