React页面加载时如何触发checkCookie函数检查Cookie？

• 问题根源：<div>元素不存在onLoaded事件，你绑定的这个事件不会被浏览器触发，所以checkCookie函数从未执行。
• 正确方案：使用React的useEffect钩子，它可以在组件**首次挂载（页面加载完成）**时执行指定逻辑，正好满足你的需求。

修改后的完整代码：

import React, { useState, useEffect } from "react"; // 新增导入useEffect
import { useCookies } from "react-cookie";

function App() {
  const [cookies, setCookie, removeCookie] = useCookies(["janganTampil"]);
  const [isCookieSet, setIsCookieSet] = useState(false);
  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();
    }
    // 注意：这里打印的是当前渲染周期的state值，setState是异步操作，如需查看更新后的值可通过useEffect监听state变化
    console.log(isCookieSet);
    console.log(show);
  }

  // 组件首次挂载时执行checkCookie，空数组依赖确保只执行一次
  useEffect(() => {
    checkCookie();
  }, []);

  return (
    <div className="App">
      ...
      {/* Tutorial is modal */}
      <Tutorial 
        isCookieSet={isCookieSet} 
        setIsCookieSet={setIsCookieSet} 
        cookies={cookies} 
        setCookie={setCookie} 
        removeCookie={removeCookie} 
        handleClose={handleClose} 
        show={show} 
      />
    </div>
  );
}

export default App;

补充说明：

• useEffect的第二个参数是依赖数组，传入空数组[]表示这个副作用只在组件首次挂载时执行一次，对应页面加载完成的时机。
• 如果后续需要在cookies变化时重新检查Cookie，可以把cookies加入依赖数组：useEffect(() => { checkCookie(); }, [cookies]);

内容的提问来源于stack exchange，提问作者Hanif Ramadhani