useEffect() TypeError: e is not a function答案

【问题标题】：useEffect() TypeError: e is not a functionuseEffect() TypeError: e is not a function
【发布时间】：2020-11-04 00:23:20
【问题描述】：

我收到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])

【问题讨论】：

你没有分享整个图片，我猜你在 useEffect 的清理功能中运行了一些代码导致了问题。无论如何，这个例子只会得到一个警告，而不是运行时错误。
我猜这个“someVar”是一个函数，问题出在哪里

标签： reactjs typeerror use-effect

【解决方案1】：

我的第一个假设是，您并不是真的要从useEffect 返回，而是误用了简写语法并且没有意识到它使用了隐式返回（read here 关于箭头函数和隐式返回)。

useEffect 返回的函数将作为清理运行（如 cmets 中所述）。您从效果中返回的内容将取决于条件，但在这两种情况下都不会返回函数。如果someVar 是假的，它将返回someVar。如果someVar 为真，则返回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>

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

【讨论】：

好收获！忘记卸载我的检查-_-，这肯定是 React github 上的问题，清理函数应该检查回调是否是一个函数。
根据 OP 作为答案发布的警告图像，我认为它已经做到了。它只是警告，并不会停止错误代码的执行。

【解决方案2】：

useEffect 期望返回一个清理函数，它是 componentWillUnmount() 生命周期的替代方法，但它是可选的。所以它会抛出错误，因为someVar && console.log('asdf') 不是一个函数。

useEffect(() => {
  if (someVar) console.log('asdf');

  return () => {
    // do something while leaving this component.
  };
}, [button)

https://reactjs.org/docs/hooks-reference.html#useeffect

【讨论】：

你试过了吗？不返回函数会留下警告，但不会出现运行时错误...
@DennisVash 如果您从 useEffect 返回 false，它会这样做。它将尝试执行false() 并中断。
我检查了，它在生产和开发中都没有中断，你检查了吗？
是的，我做到了。我得到了d is not a function。
@DennisVash 添加了运行示例的答案

【解决方案3】：

我覆盖了 react-dom 和 react 包以进行开发，我们到了。我在提供给 useEffect 的 fn 中返回了一个布尔值。 codesandbox

【讨论】：

这是一个警告。不是像您的问题那样的运行时错误，您也应该编辑问题而不是回答更多细节。
这会导致运行时错误。查看代码框并单击按钮。抱歉没有意识到这一点。将来会这样做。似乎很奇怪有 UX 让 OP 回答。
它不会导致运行时错误。您的代码库中的特定代码可以。确保我检查了自己。
好吧，我的意思是这不是重点吗？我的问题是为什么我的 useEffect 会发生这个运行时错误。如果这是 react 的问题，我会将其发布在 github 上。我试图弄清楚为什么我对 react 的使用是错误的，我做到了。返回一个实际的 fn。