时间戳

首页 > 解决方案 > useEffect() TypeError: e is not a function

reactjs - useEffect() TypeError: e is not a function

问题描述

我越来越TypeError: e is not a function

在 MessagePort.C.port1.onmessage (react.production.min.js:24)

出于我在 useEffect() 中不理解的原因。我意识到这可能是相对于我的代码库的一个模糊问题，因为我无法在代码沙箱中复制，但我想无论如何我都会把它扔掉。

useEffect(() => someVar && console.log('asdf'), [button])

当我简单地将函数放在一个块中时，它似乎有效

useEffect(() => {if (someVar) console.log('asdf')}, [button])

标签： reactjstypeerroruse-effect

解决方案

我的第一个假设是，您并不是真的要从 .return 中返回useEffect，而是误用了简写语法并且没有意识到它使用了隐式返回（在此处阅读有关箭头函数和隐式返回的信息）。

从返回的函数useEffect将作为清理运行（如评论中所述）。您从效果中返回的内容将取决于条件，但在这两种情况下都不会返回函数。如果someVar是假的，它将返回someVar。如果someVar是真实的，它将返回 is 的console.log()值undefined。

useEffect看看下面返回时会发生什么false（单击“卸载”按钮查看效果）。

const {useState, useEffect} = React;

const Example = () => {
  const [toggle, setToggle] = useState(true);
   
   return (
    <div>
      {toggle ? <Child /> : null}
      <button onClick={() => setToggle(!toggle)}>unmount</button>
    </div>)
}
const Child = () => {
   useEffect(() => false);
   
   return <span />
}


ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

使用效果时，您应该始终使用箭头函数的长手形式，除非您只打算对其进行清理。

推荐阅读