useEffect（）TypeError：e不是函数

Question

我得到TypeError: e is not a function

在MessagePort.C.port1.onmessage（react.production.min.js：24）

由于我在useEffect（）中无法理解的原因。我意识到，相对于我的代码库，这可能是一个晦涩的问题，因为我无法在codeandbox中进行复制，但认为无论如何我都会扔掉它。

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

当我简单地将函数放在一个块中时，它似乎起作用

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

Answer 1

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

从useEffect返回的函数将作为清理运行（如注释中所述）。您从效果返回的结果将取决于条件，但在任何情况下都不会返回函数。如果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>

除非特意将其传递给清理对象，否则在使用效果时应始终使用箭头函数的长手形式。

Answer 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

Answer 3

我否决了react-dom，对开发进行了反应，现在我们就在这里。我在提供给useEffect的fn中返回了一个布尔值。 codesandbox