当 body 函数进行条件检查时，应该从 useEffect hook 返回什么?

Question

我正在使用useEffect钩子，在某些情况下我不需要返回任何东西。处理这种情况的最佳方法是什么？

// fooRef is a reference to a textfield (belonging to the same component). Sometimes the fooRef is not there,because of redirections) that's why I need to check if it exists
useEffect(() => fooRef.current && fooRef.current.focus()  , [fooRef])

当像这样使用它时，React 会抱怨以下错误消息：效果函数不得返回除用于清理的函数之外的任何内容。您返回了空值。如果效果不需要清理，则返回 undefined(或不返回任何内容(。

最好的选择是返回未定义的函数还是空函数？

Answer 1

我想你打算写

useEffect(() => {if (fooRef.current) fooRef.current.focus()  } , [fooRef])

您当前的实现返回执行fooRef.current && fooRef.current.focus()的布尔结果，而不仅仅是执行 focus 函数(如果为 truefooRef.current(。

Answer 2

您可以使用void：

useEffect(() => void rooRef.current && fooRef.current.focus(), [fooRef])

观看 Kent C. Dodds 视频：使用void使箭头函数不返回任何内容

Answer 3

当你在箭头函数中编写上面的语法时，你明确通知返回 fooRef.current.focus((，所以做如下的事情

useEffect(() => { if(fooRef.current) fooRef.current.focus() } , [fooRef])