[英]conditional rendering is not working in my functional component
I am trying to render a component if (age<18) in the next block of code我正在尝试在下一个代码块中呈现组件 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)}
here's useState hook:这是 useState 钩子:
const [uneligible,setEligible] = React.useState(
false // default value
)
and here's how I am trying to render it:这就是我试图渲染它的方式:
<div>{uneligible&& <Alert variant="filled" severity="error">
This is an error alert — check it out!
</Alert>}</div>
in the actual project there's no errors, just the component not rendering and I made minimised version of the code here but it still has problem in rendering: https://codesandbox.io/s/thirsty-sara-jiomm?file=/src/App.js在实际项目中没有错误,只是组件没有渲染,我在这里做了代码的最小化版本,但渲染仍然有问题: https://codesandbox.io/s/thirsty-sara-jiomm?file=/src /App.js
You don't actually need state here.您实际上并不需要 state 。 Just use
const uneligible = age<18
and get rid of the useState
code, and it will work okay.只需使用
const uneligible = age<18
并摆脱useState
代码,它就可以正常工作。 If you put uneligible
in the state you create a render loop, as setting it triggers a re-render, which sets the state again and triggers another re-render, etc.如果您在
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>
);
};
Get the dateOfBirth
, and set uneligible
as a standard const ( useMemo
for slight optimization if needed).获取
dateOfBirth
,并将uneligible
设置为标准 const (如果需要, useMemo
进行轻微优化)。 This will prevent the loop in which render sets the state, and setting the state causes a re-render, which sets the state...这将防止渲染设置 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>
The function re-renders again and again because you set the state immediately. function 一次又一次地重新渲染,因为您立即设置了 state。 Solution:
解决方案:
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.