我如何在不使用 onClick 按钮的情况下显示反应烤面包？它应该在页面加载后出现

Question

我展示的代码是一个带有 onClick 按钮和自定义自动关闭设置时间为 1 分钟的 react toastify 库。我想在不使用按钮的情况下使用库，但是当页面加载时，有人可以帮我实现吗？

import React, { useRef, useEffect } from "react";
import * as tf from "@tensorflow/tfjs";
import Webcam from "react-webcam";
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure();

function AppMain() { 

  const notify = () => toast("Fetching the Model Do not Close", {
    position: toast.POSITION.TOP_CENTER,
    autoClose: 60000});
 

  const webcamRef = useRef(null);
 

  };

  return (
    <div id="main" className="mainBlock">
      <div className="toasterbutton">
      
       
     <button onClick={notify}>Load Model</button>

     <ToastContainer />
    </div>
        <div id="caption"></div>
            <header style="margin-top:-2.5 rem;" className="container-fluid">
                <Webcam 
                ref={webcamRef}

                audio={false}
                muted={true} 
                style={{
                  position: "absolute",
                  marginLeft: "auto",
                  marginRight: "auto",
                  left: 0,
                  right: 0,
                  textAlign: "center",
                  zindex: 9,
                  width: 640,
                  height: 480,
            
                 }}
          
                 />

               
            </header>  
    </div>
  );
}

export default AppMain;

Answer 1

尝试将函数调用和the function itself 放在仅在挂载时运行的useEffect 中。

function AppMain() { 
  const [show, hide] = useState(true);
  
  useEffect(() => {
    const notify = () => toast("Fetching the Model Do not Close", {
      position: toast.POSITION.TOP_CENTER,
      autoClose: 60000
    });

    notify();
  }, [])

This answer 很好地解释了 useEffect 依赖数组。