Как вызвать функцию onClick, которая определена в React Hooks useEffect ()?

Question

    useEffect(() => {
    //Calling this function
    const handleClick = () => {
      const lazyApp = import("firebase/app")
      const lazyStore = import("firebase/firestore")
//Some code here

    }
  }, [])

//Calling the function here
<MDBBtn
            to=""
            className="btn p-0 btn-white bg-transparent"
            title="Add To Cart"
            onClick={handleClick}
          >
            <FontAwesomeIcon
              icon={faShoppingCart}
              style={{ fontSize: "1.3rem" }}
            />
          </MDBBtn>

Я пытаюсь вызвать функцию после нажатия кнопки. Но я хочу, чтобы эта функция была определена внутри useEffect () по ряду причин. Я получаю ошибку, что handleClick не определен. Какое решение для этого?

Answer 1

Потому что ты не можешь. Это не так, как это работает. useEffect - без второго параметра - работает как жизненный цикл componentDidMount. Вызываемая функция уже была вызвана при монтировании компонента.

Я не знаю, по какой причине вы пытаетесь вызвать функцию onclick внутри useEffect, я никогда не видел ничего подобного.

Answer 2

Несмотря на то, что это кажется странным и похоже на анти-паттерн, вы можете это реализовать. Использование useRef для сохранения ссылки на вашу функцию.

Пожалуйста, проверьте, действительно ли вам нужно это сделать.

function App() {

  console.log("Rendering App...");
  const click_ref = React.useRef(null);
  
  React.useEffect(()=>{
    function handleClick() {
      console.log("Running handleClick defined inside useEffect()...");
    }
    console.log("Updating click_ref...");
    click_ref.current = handleClick;
  },[]);

  return(
    <React.Fragment>
      <div>App</div>
      <button onClick={()=>click_ref.current()}>Click</button>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 3

Я нашел эту статью , описывающую, как реализовать в компоненте класса:

componentDidMount() {
  const lazyApp = import('firebase/app')
  const lazyDatabase = import('firebase/database')

  Promise.all([lazyApp, lazyDatabase]).then(([firebase]) => {
    const database = getFirebase(firebase).database()
    // do something with `database` here,
    // or store it as an instance variable or in state
    // to do stuff with it later
  })
}

В вашем случае вам нужно будет mimi c, что componentDidMount через useEffect и реализовать некоторый обработчик кликов.

Вы можете попробовать сделать следующее:

let lazyApp, lazyDatabase;
useEffect(() => {
  lazyApp = import("firebase/app");
  lazyDatabase = import("firebase/firestore");
}, []);

const handleClick = (e) => {
  e.preventDefault();
  Promise.all([lazyApp, lazyDatabase]).then(([firebase]) => {
    const database = getFirebase(firebase).database()
    // do something with `database` here,
    // or store it as an instance variable or in state
    // to do stuff with it later
  })
};

Это не проверено, но, возможно, это поможет.