条件渲染在我的功能组件中不起作用答案

【问题标题】：conditional rendering is not working in my functional component条件渲染在我的功能组件中不起作用
【发布时间】：2021-04-28 02:31:06
【问题描述】：

我正在尝试在下一个代码块中呈现一个组件 if (age

 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

【问题讨论】：

标签： javascript reactjs react-hooks jsx

【解决方案1】：

函数会一次又一次地重新渲染，因为您立即设置了状态。解决方案：

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;

【讨论】：

【解决方案2】：

这里实际上不需要状态。只需使用const uneligible = age<18 并摆脱useState 代码，它就可以正常工作。如果您将uneligible 置于创建渲染循环的状态，设置它会触发重新渲染，它会再次设置状态并触发另一个重新渲染，等等。

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

Sandbox example

【讨论】：

【解决方案3】：

获取dateOfBirth，并将uneligible 设置为标准常量（useMemo 用于根据需要进行轻微优化）。这将防止渲染设置状态的循环，设置状态会导致重新渲染，从而设置状态...

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>

【讨论】：