useEffect 需要调用函数，并在 5 秒后进行渲染。

huangapple
go评论96阅读模式
英文:

useEffect needs to call function and render it after 5 seconds

问题

以下是您要翻译的代码部分：

  1. import React, { useState, useEffect } from "react";
  2. import { MdDone } from "react-icons/md";
  3. import { getCookie, setCookie } from 'tiny-cookie';
  5. const CookieNotice = () => {
  6.     const [items, setItems] = useState({
  7.         name: "zureaCookie",
  8.         value: ""
  9.     });
  11.     useEffect(() => {
  12.         const delay = 5000;
  13.         const timeoutId = setTimeout(() => {
  14.             renderCookie();
  15.         }, delay);
  16.         return () => {
  17.             clearTimeout(timeoutId);
  18.         };
  19.     }, []);
  21.     const acceptCookie = (e) => {
  22.         e.preventDefault();
  23.         let newItemsObj = { ...items };
  24.         newItemsObj.value = "Accepted";
  25.         setItems(newItemsObj);
  26.         setCookie(items.name, newItemsObj.value, { expires: '1Y' });
  27.     }
  29.     const declineCookie = (e) => {
  30.         e.preventDefault();
  31.         let newItemsObj = { ...items };
  32.         newItemsObj.value = "Declined";
  33.         setItems(newItemsObj);
  34.         setCookie(items.name, newItemsObj.value, { expires: '1Y' });
  35.     }
  37.     const renderCookie = () => {
  38.         const zureaCookie = getCookie(items.name);
  39.         return (
  40.             <>
  41.                 {!zureaCookie ? (<div className="cookie-notice-container">
  42.                     <div className="cookie-notice-wrapper">
  43.                         <div className="cookie-notice-content">
  44.                             <p>We use cookies to improve your experience on our website. By browsing this website,
  45.                                 you agree to our use of cookies.</p>
  46.                         </div>
  47.                         <div className="cookie-notice-btn-wrapper">
  48.                             <a href="" className="btn-terms">Terms & Conditions</a>
  49.                             <a href="" className="btn-decline" onClick={declineCookie}>Decline</a>
  50.                             <a href="" className="btn-accept" onClick={acceptCookie}>Accept<MdDone className="md-done" /></a>
  51.                         </div>
  52.                     </div>
  53.                 </div>) : (null)}
  54.             </>
  55.         );
  57.     }
  59.     return renderCookie();
  61. }
  63. 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?

  1. import React, {useState, useEffect} from &quot;react&quot;;
  2. import { MdDone } from &quot;react-icons/md&quot;;
  3. import {getCookie, setCookie} from &#39;tiny-cookie&#39;;
  4. const CookieNotice = () =&gt; {
  5. const [items, setItems] = useState({
  6. name: &quot;zureaCookie&quot;,
  7. value: &quot;&quot;
  8. });
  9. useEffect(() =&gt; {
  10. const delay = 5000; 
  11. const timeoutId = setTimeout(() =&gt; {
  12. renderCookie();
  13. }, delay);
  14. return () =&gt; {
  15. clearTimeout(timeoutId);
  16. };
  17. }, []);
  18. const acceptCookie = (e) =&gt; {
  19. e.preventDefault();
  20. let newItemsObj = {...items};
  21. newItemsObj.value = &quot;Accepted&quot;;
  22. setItems(newItemsObj);
  23. setCookie(items.name, newItemsObj.value, { expires: &#39;1Y&#39; });
  24. }
  25. const declineCookie = (e) =&gt; {
  26. e.preventDefault();
  27. let newItemsObj = {...items};
  28. newItemsObj.value = &quot;Declined&quot;;
  29. setItems(newItemsObj);
  30. setCookie(items.name, newItemsObj.value, { expires: &#39;1Y&#39; });
  31. }
  32. const renderCookie = () =&gt; {
  33. const zureaCookie = getCookie(items.name);
  34. return (
  35. &lt;&gt;
  36. {!zureaCookie ? (&lt;div className=&quot;cookie-notice-container&quot;&gt;
  37. &lt;div className=&quot;cookie-notice-wrapper&quot;&gt;
  38. &lt;div className=&quot;cookie-notice-content&quot;&gt;
  39. &lt;p&gt;We use cookies to improve your experience on our website. By browsing this website,
  40. you agree to our use of cookies.&lt;/p&gt;
  41. &lt;/div&gt;
  42. &lt;div className=&quot;cookie-notice-btn-wrapper&quot;&gt;
  43. &lt;a href=&quot;&quot; className=&quot;btn-terms&quot;&gt;Terms &amp; Conditions&lt;/a&gt;
  44. &lt;a href=&quot;&quot; className=&quot;btn-decline&quot; onClick={declineCookie}&gt;Decline&lt;/a&gt;
  45. &lt;a href=&quot;&quot; className=&quot;btn-accept&quot; onClick={acceptCookie}&gt;Accept&lt;MdDone className=&quot;md-done&quot; /&gt;&lt;/a&gt;
  46. &lt;/div&gt;
  47. &lt;/div&gt;
  48. &lt;/div&gt;) : (null)}
  49. &lt;/&gt;);
  50. }
  51. return renderCookie();
  52. }
  53. export default CookieNotice;

答案1

得分: 3

这是您提供的代码的中文翻译：

  1. import React, { useState, useEffect } from "react";
  2. import { MdDone } from "react-icons/md";
  3. import { getCookie, setCookie } from "tiny-cookie";
  5. const CookieNotice = () => {
  6.   const [items, setItems] = useState({
  7.     name: "zureaCookie",
  8.     value: "",
  9.   });
  10.   const [elapsed, setElapsed] = useState(false);
  12.   useEffect(() => {
  13.     const delay = 5000;
  14.     const timeoutId = setTimeout(() => {
  15.       setElapsed(true);
  16.     }, delay);
  17.     return () => {
  18.       clearTimeout(timeoutId);
  19.     };
  20.   }, []);
  22.   const acceptCookie = (e) => {
  23.     e.preventDefault();
  24.     let newItemsObj = { ...items };
  25.     newItemsObj.value = "Accepted";
  26.     setItems(newItemsObj);
  27.     setCookie(items.name, newItemsObj.value, { expires: "1Y" });
  28.   };
  30.   const declineCookie = (e) => {
  31.     e.preventDefault();
  32.     let newItemsObj = { ...items };
  33.     newItemsObj.value = "Declined";
  34.     setItems(newItemsObj);
  35.     setCookie(items.name, newItemsObj.value, { expires: "1Y" });
  36.   };
  38.   const renderCookie = () => {
  39.     const zureaCookie = getCookie(items.name);
  40.     return (
  41.       <>
  42.         {!zureaCookie && elapsed ? (
  43.           <div className="cookie-notice-container">
  44.             <div className="cookie-notice-wrapper">
  45.               <div className="cookie-notice-content">
  46.                 <p>
  47.                   我们使用cookie来提升您在我们网站的体验。通过浏览本网站，您同意我们使用cookie。
  48.                 </p>
  49.               </div>
  50.               <div className="cookie-notice-btn-wrapper">
  51.                 <a href="" className="btn-terms">
  52.                   条款和条件
  53.                 </a>
  54.                 <a href="" className="btn-decline" onClick={declineCookie}>
  55.                   拒绝
  56.                 </a>
  57.                 <a href="" className="btn-accept" onClick={acceptCookie}>
  58.                   接受
  59.                   <MdDone className="md-done" />
  60.                 </a>
  61.               </div>
  62.             </div>
  63.           </div>
  64.         ) : null}
  65.       </>
  66.     );
  67.   };
  69.   return renderCookie();
  70. };
  72. export default CookieNotice;

请注意，代码中的HTML标签和文本内容已经翻译成了中文。

英文: 
  1. import React, { useState, useEffect } from &quot;react&quot;;
  2. import { MdDone } from &quot;react-icons/md&quot;;
  3. import { getCookie, setCookie } from &quot;tiny-cookie&quot;;
  4. const CookieNotice = () =&gt; {
  5. const [items, setItems] = useState({
  6. name: &quot;zureaCookie&quot;,
  7. value: &quot;&quot;,
  8. });
  9. const [elapsed, setElapsed] = useState(false);
  10. useEffect(() =&gt; {
  11. const delay = 5000;
  12. const timeoutId = setTimeout(() =&gt; {
  13. setElapsed(true);
  14. }, delay);
  15. return () =&gt; {
  16. clearTimeout(timeoutId);
  17. };
  18. }, []);
  19. const acceptCookie = (e) =&gt; {
  20. e.preventDefault();
  21. let newItemsObj = { ...items };
  22. newItemsObj.value = &quot;Accepted&quot;;
  23. setItems(newItemsObj);
  24. setCookie(items.name, newItemsObj.value, { expires: &quot;1Y&quot; });
  25. };
  26. const declineCookie = (e) =&gt; {
  27. e.preventDefault();
  28. let newItemsObj = { ...items };
  29. newItemsObj.value = &quot;Declined&quot;;
  30. setItems(newItemsObj);
  31. setCookie(items.name, newItemsObj.value, { expires: &quot;1Y&quot; });
  32. };
  33. const renderCookie = () =&gt; {
  34. const zureaCookie = getCookie(items.name);
  35. return (
  36. &lt;&gt;
  37. {!zureaCookie &amp;&amp; elapsed ? (
  38. &lt;div className=&quot;cookie-notice-container&quot;&gt;
  39. &lt;div className=&quot;cookie-notice-wrapper&quot;&gt;
  40. &lt;div className=&quot;cookie-notice-content&quot;&gt;
  41. &lt;p&gt;
  42. We use cookies to improve your experience on our website. By browsing this website, you agree to our
  43. use of cookies.
  44. &lt;/p&gt;
  45. &lt;/div&gt;
  46. &lt;div className=&quot;cookie-notice-btn-wrapper&quot;&gt;
  47. &lt;a href=&quot;&quot; className=&quot;btn-terms&quot;&gt;
  48. Terms &amp; Conditions
  49. &lt;/a&gt;
  50. &lt;a href=&quot;&quot; className=&quot;btn-decline&quot; onClick={declineCookie}&gt;
  51. Decline
  52. &lt;/a&gt;
  53. &lt;a href=&quot;&quot; className=&quot;btn-accept&quot; onClick={acceptCookie}&gt;
  54. Accept
  55. &lt;MdDone className=&quot;md-done&quot; /&gt;
  56. &lt;/a&gt;
  57. &lt;/div&gt;
  58. &lt;/div&gt;
  59. &lt;/div&gt;
  60. ) : null}
  61. &lt;/&gt;
  62. );
  63. };
  64. return renderCookie();
  65. };
  66. export default CookieNotice;

huangapple
  • 本文由 发表于 2023年2月24日 03:43:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/75549611.html
  • javascript
  • react-hooks
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定