在反应中检查页面加载上的cookie
[英]check cookie on page load in react
问题描述
I want to check cookie on page load in react.
我想在反应中检查页面加载时的cookie。 After the page load the function checkCookie not executed because the console.log inside the function not appear in console.页面加载后 function checkCookie没有执行，因为 function 里面的console.log没有出现在控制台中。 how to execute the checkCookie ?如何执行checkCookie ？ Here my code:这是我的代码：
import React, { useState } from "react";
import { useCookies } from "react-cookie";
function App() {
const [cookies, setCookie, removeCookie] = useCookies(["janganTampil"]);
const [isCookieSet, setIsCookieSet] = useState(false);
// state for modal
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
function checkCookie() {
const tampil = cookies.janganTampil === 'true';
if (tampil) {
setIsCookieSet(true);
} else {
handleShow();
}
console.log(isCookieSet);
console.log(show);
}
return (
<div onLoaded={checkCookie} className="App">
...
{/* Tutorial is modal */}
<Tutorial isCookieSet={isCookieSet} setIsCookieSet={setIsCookieSet} cookies={cookies} setCookie={setCookie} removeCookie={removeCookie} handleClose={handleClose} show={show} ></Tutorial>
</div>
);
}
export default App;
2 个解决方案
解决方案1
0 已采纳 2022-08-11 15:52:39
div elements do not load. div元素不加载。 onload event(s) can only be used in several elements of the DOM, and div is not one of them. onload事件只能在 DOM 的几个元素中使用，而div不是其中之一。 onload events can only be used with these: <body> , <frame> , <iframe> , <img> , <input type="image"> , <link> , <script> , and <style> . onload事件只能与这些一起使用： <body> 、 <frame> 、 <iframe> 、 <img> 、 <input type="image"> 、 <link> 、 <script>和<style> 。
The solution to your problem is to use a hook, in this case we use useEffect .您的问题的解决方案是使用钩子，在这种情况下我们使用useEffect 。 Here's a fixed version of your code:这是您的代码的固定版本：
import React, { useState } from "react";
import { useCookies } from "react-cookie";
function App() {
const [cookies, setCookie, removeCookie] = useCookies(["janganTampil"]);
const [isCookieSet, setIsCookieSet] = useState(false);
// state for modal
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
function checkCookie() {
const tampil = cookies.janganTampil === 'true';
if (tampil) {
setIsCookieSet(true);
} else {
handleShow();
}
console.log(isCookieSet);
console.log(show);
}
// An effect which will be loaded once on load. `[]` means
// no dependencies, so the hook will only be run just once only.
useEffect(() => {
// Call this function when this hook is running. It isn't
// and async function or the like, so a 'normal call' like this
// is enough.
checkCookie();
}, []);
// Notice that I deleted the `onLoaded` prop here. It isn't valid.
return (
<div className="App">
...
{/* Tutorial is modal */}
<Tutorial isCookieSet={isCookieSet} setIsCookieSet={setIsCookieSet} cookies={cookies} setCookie={setCookie} removeCookie={removeCookie} handleClose={handleClose} show={show} ></Tutorial>
</div>
);
}
export default App;
References:参考：
解决方案2
0 2022-08-11 16:07:55
Please try with the Effect Hook (useEffect)请尝试使用效果挂钩 (useEffect)
import React, { useState, useEffect } from "react";
import { useCookies } from "react-cookie";
function App() {
const [cookies, setCookie, removeCookie] = useCookies(["janganTampil"]);
const [isCookieSet, setIsCookieSet] = useState(false);
// state for modal
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
function checkCookie() {
const tampil = cookies.janganTampil === 'true';
if (tampil) {
setIsCookieSet(true);
} else {
handleShow();
}
console.log(isCookieSet);
console.log(show);
}
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
checkCookie();
console.log('useEffect called');
},[]);
return (
<div className="App">
...
{/* Tutorial is modal */}
<Tutorial isCookieSet={isCookieSet} setIsCookieSet={setIsCookieSet} cookies={cookies} setCookie={setCookie} removeCookie={removeCookie} handleClose={handleClose} show={show} ></Tutorial>
</div>
);
}
export default App;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.