我在 React 中创建了一个功能组件,如下所示:
import React, {useEffect} from "react";
import "./styles.css";
export default function App() {
useEffect(() => logSomething(), [])
const logSomething = () => console.log('whats up');
return (<div> hello </div>)
}
此函数运行时没有任何错误,并在控制台中成功注销“whats up”。
然而,当我尝试以下操作时,我得到一个 TypeError:
export default function App() {
useEffect(logSomething(), [])
const logSomething = () => () => console.log('whats up');
return (<div> hello </div>)
}
类似地,当我尝试这个时我得到一个 TypeError:
export default function App() {
useEffect(logSomething, [])
const logSomething = () => console.log('whats up');
return (<div> hello </div>)
}
为什么第一个例子成功了,第二个和第三个例子却失败了?第一个函数表达式是否以某种方式被提升?如果是这样,为什么不提升其他 2 个函数表达式?或者这只是 JavaScript 中函数引用工作方式的一些怪癖?
最佳答案
在您的第二个和第三个示例中,您试图在定义 logSomething 之前使用它。这会导致类型错误。
第一个示例有效,因为传递给 useEffect 的匿名函数不会立即被调用,所以 logSomething 还没有定义也没关系。在调用该函数时,const logSomething 已定义并在范围内。
关于javascript - React 的 useEffect 钩子(Hook)如何访问其下定义的所有函数表达式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64270133/