Мое первое предположение состоит в том, что вы на самом деле не собираетесь возвращаться из useEffect
, но неправильно использовали сокращенный синтаксис и не осознавали, что он использует неявный возврат ( читайте здесь о стрелочные функции и неявный возврат).
Функция, возвращаемая из 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>
Вы всегда должны использовать длинную стрелку в форме стрелки при использовании эффекта, если только вы не собираетесь передавать его только для очистки.