Question

我正在尝试通过以下方式调用 SELECT t1.id,t1.name,t1.price FROM mytable t1 LEFT JOIN mytable t2 ON t1.name=t2.name AND t1.id=(SELECT MAX(t3.id) FROM mytable t3 WHERE t3.id<t2.id) WHERE t1.id=1 OR t2.id IS NOT NULL ORDER BY 1 中的函数：

useEffect()

如您所见，每次点击 const myComponent = () => { useEffect(() => { const aFunc = () => { console.log("function called") } }, []) return ( <button onClick={() => aFunc()} /> ) } 时，我都想调用 <button> 函数。

如何在 aFunc() 之外但在同一组件中调用 aFunc？当我在 useEffect()

中绑定它时，React 似乎无法识别该函数

Answer 1

你不能。该函数存在于不同的作用域中。

useEffect 的目的是隔离代码，这样它就不会在每次组件呈现时都重新运行。最常见的用途是在组件添加到文档时发出 Ajax 请求，不会触发无限循环，因为每个 Ajax 响应都会导致组件重新渲染并触发 Ajax 请求再次制作。

直接在组件内部声明函数，或者，因为这个特定示例中的函数不依赖于来自组件的任何数据，完全在组件外部。

如果您的示例过于简化，并且创建函数的过程成本高昂且依赖于组件中的数据：请查看 useCallback。

Answer 2

您不需要为此使用 useEffect，

const myComponent = () => {
          const aFunc = () => {
              console.log("function called")
          }
        
          return (
            <button onClick={() => aFunc()} />
          )
        }

Answer 3

我想你想要这个

const myComponent = () => {
  const aFunc = () => {
      console.log("function called")
  }
  
  useEffect(() => {
    aFunc()
  }, [])

  return (
    <button onClick={() => aFunc()} />
  )
}

如何在 useEffect() 之外调用函数

3 个答案: