Question

onButton=()=>{
   const data = {};
    data = {...this.state.form}
   console.log(data)
 }

我试图在按钮单击事件之后调用一个函数。但是，由于某些原因，我希望在useEffect（）中定义该函数。我收到未定义handleClick的错误。解决方案是什么？

Answer 1

因为你不能。那不是它的工作原理。 useEffect（没有第二个参数）的工作方式类似于componentDidMount生命周期。挂载组件时，正在调用的函数已经被调用。

我不知道您尝试在useEffect内部调用onclick函数的原因是什么，我从未见过这样的事情。

Answer 2

我发现this article描述了如何在类组件中实现：

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
  })
}

在您的情况下，您需要通过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
  })
};

这未经测试，但这也许会有所帮助。

Answer 3

即使这看起来很奇怪并且像一个反模式，这也是实现它的方法。使用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"/>

如何调用React Hooks useEffect（）中定义的onClick函数？

3 个答案: