英文:
useEffect needs to call function and render it after 5 seconds
问题
以下是您要翻译的代码部分：
import React, { useState, useEffect } from "react";
import { MdDone } from "react-icons/md";
import { getCookie, setCookie } from 'tiny-cookie';
const CookieNotice = () => {
const [items, setItems] = useState({
name: "zureaCookie",
value: ""
});
useEffect(() => {
const delay = 5000;
const timeoutId = setTimeout(() => {
renderCookie();
}, delay);
return () => {
clearTimeout(timeoutId);
};
}, []);
const acceptCookie = (e) => {
e.preventDefault();
let newItemsObj = { ...items };
newItemsObj.value = "Accepted";
setItems(newItemsObj);
setCookie(items.name, newItemsObj.value, { expires: '1Y' });
}
const declineCookie = (e) => {
e.preventDefault();
let newItemsObj = { ...items };
newItemsObj.value = "Declined";
setItems(newItemsObj);
setCookie(items.name, newItemsObj.value, { expires: '1Y' });
}
const renderCookie = () => {
const zureaCookie = getCookie(items.name);
return (
<>
{!zureaCookie ? (<div className="cookie-notice-container">
<div className="cookie-notice-wrapper">
<div className="cookie-notice-content">
<p>We use cookies to improve your experience on our website. By browsing this website,
you agree to our use of cookies.</p>
</div>
<div className="cookie-notice-btn-wrapper">
<a href="" className="btn-terms">Terms & Conditions</a>
<a href="" className="btn-decline" onClick={declineCookie}>Decline</a>
<a href="" className="btn-accept" onClick={acceptCookie}>Accept<MdDone className="md-done" /></a>
</div>
</div>
</div>) : (null)}
</>
);
}
return renderCookie();
}
export default CookieNotice;
英文:
I need to show cookies after 5 seconds on the home pages. The function renderCookie works fine but I'm not sure how to implement useUffect and to call function renderCookie after 5 seconds. At the moment it runs immediately but not after 5 seconds. Anyone have any suggestions, I'm not sure where I went wrong?
import React, {useState, useEffect} from "react";
import { MdDone } from "react-icons/md";
import {getCookie, setCookie} from 'tiny-cookie';
const CookieNotice = () => {
const [items, setItems] = useState({
name: "zureaCookie",
value: ""
});
useEffect(() => {
const delay = 5000;
const timeoutId = setTimeout(() => {
renderCookie();
}, delay);
return () => {
clearTimeout(timeoutId);
};
}, []);
const acceptCookie = (e) => {
e.preventDefault();
let newItemsObj = {...items};
newItemsObj.value = "Accepted";
setItems(newItemsObj);
setCookie(items.name, newItemsObj.value, { expires: '1Y' });
}
const declineCookie = (e) => {
e.preventDefault();
let newItemsObj = {...items};
newItemsObj.value = "Declined";
setItems(newItemsObj);
setCookie(items.name, newItemsObj.value, { expires: '1Y' });
}
const renderCookie = () => {
const zureaCookie = getCookie(items.name);
return (
<>
{!zureaCookie ? (<div className="cookie-notice-container">
<div className="cookie-notice-wrapper">
<div className="cookie-notice-content">
<p>We use cookies to improve your experience on our website. By browsing this website,
you agree to our use of cookies.</p>
</div>
<div className="cookie-notice-btn-wrapper">
<a href="" className="btn-terms">Terms & Conditions</a>
<a href="" className="btn-decline" onClick={declineCookie}>Decline</a>
<a href="" className="btn-accept" onClick={acceptCookie}>Accept<MdDone className="md-done" /></a>
</div>
</div>
</div>) : (null)}
</>);
}
return renderCookie();
}
export default CookieNotice;
答案1
得分: 3
这是您提供的代码的中文翻译：
import React, { useState, useEffect } from "react";
import { MdDone } from "react-icons/md";
import { getCookie, setCookie } from "tiny-cookie";
const CookieNotice = () => {
const [items, setItems] = useState({
name: "zureaCookie",
value: "",
});
const [elapsed, setElapsed] = useState(false);
useEffect(() => {
const delay = 5000;
const timeoutId = setTimeout(() => {
setElapsed(true);
}, delay);
return () => {
clearTimeout(timeoutId);
};
}, []);
const acceptCookie = (e) => {
e.preventDefault();
let newItemsObj = { ...items };
newItemsObj.value = "Accepted";
setItems(newItemsObj);
setCookie(items.name, newItemsObj.value, { expires: "1Y" });
};
const declineCookie = (e) => {
e.preventDefault();
let newItemsObj = { ...items };
newItemsObj.value = "Declined";
setItems(newItemsObj);
setCookie(items.name, newItemsObj.value, { expires: "1Y" });
};
const renderCookie = () => {
const zureaCookie = getCookie(items.name);
return (
<>
{!zureaCookie && elapsed ? (
<div className="cookie-notice-container">
<div className="cookie-notice-wrapper">
<div className="cookie-notice-content">
<p>
我们使用cookie来提升您在我们网站的体验。通过浏览本网站，您同意我们使用cookie。
</p>
</div>
<div className="cookie-notice-btn-wrapper">
<a href="" className="btn-terms">
条款和条件
</a>
<a href="" className="btn-decline" onClick={declineCookie}>
拒绝
</a>
<a href="" className="btn-accept" onClick={acceptCookie}>
接受
<MdDone className="md-done" />
</a>
</div>
</div>
</div>
) : null}
</>
);
};
return renderCookie();
};
export default CookieNotice;
请注意，代码中的HTML标签和文本内容已经翻译成了中文。
英文:
import React, { useState, useEffect } from "react";
import { MdDone } from "react-icons/md";
import { getCookie, setCookie } from "tiny-cookie";
const CookieNotice = () => {
const [items, setItems] = useState({
name: "zureaCookie",
value: "",
});
const [elapsed, setElapsed] = useState(false);
useEffect(() => {
const delay = 5000;
const timeoutId = setTimeout(() => {
setElapsed(true);
}, delay);
return () => {
clearTimeout(timeoutId);
};
}, []);
const acceptCookie = (e) => {
e.preventDefault();
let newItemsObj = { ...items };
newItemsObj.value = "Accepted";
setItems(newItemsObj);
setCookie(items.name, newItemsObj.value, { expires: "1Y" });
};
const declineCookie = (e) => {
e.preventDefault();
let newItemsObj = { ...items };
newItemsObj.value = "Declined";
setItems(newItemsObj);
setCookie(items.name, newItemsObj.value, { expires: "1Y" });
};
const renderCookie = () => {
const zureaCookie = getCookie(items.name);
return (
<>
{!zureaCookie && elapsed ? (
<div className="cookie-notice-container">
<div className="cookie-notice-wrapper">
<div className="cookie-notice-content">
<p>
We use cookies to improve your experience on our website. By browsing this website, you agree to our
use of cookies.
</p>
</div>
<div className="cookie-notice-btn-wrapper">
<a href="" className="btn-terms">
Terms & Conditions
</a>
<a href="" className="btn-decline" onClick={declineCookie}>
Decline
</a>
<a href="" className="btn-accept" onClick={acceptCookie}>
Accept
<MdDone className="md-done" />
</a>
</div>
</div>
</div>
) : null}
</>
);
};
return renderCookie();
};
export default CookieNotice;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论