consistent-return for useEffect

Question

当我做这样的事情时

  useEffect(() => {
    if (steps.step2 && !requestKey) {
      const timeoutId = setTimeout(() => startProcess(), 500)
      return () => clearTimeout(timeoutId)
    }
  }, [steps, requestKey, startProcess])

eslint 抱怨我 error Expected to return a value at the end of arrow function consistent-return return () => clearTimeout(timeoutId)

因为当我评论这个错误消失了。

// return () => { clearTimeout(timeoutId); }

如何解决这个问题，有什么想法吗？

Answer 1

当我在 useEffect(() => {...})

末尾添加这个 return () => {}

现在 eslint 不会抱怨这个了。

  useEffect(() => {
    if (steps.step2 && !requestKey) {
      const timeoutId = setTimeout(() => startProcess(), 500)
      return () => clearTimeout(timeoutId)
    }
    + return () => {}
  }, [steps, requestKey, startProcess])

Answer 2

如果您 return 至少在一个分支中，您需要始终 return 一个值以遵循规则。它不一定是一个函数，它只需要是独立语句 return 以外的东西。这也有效：

  useEffect(() => {
    if (steps.step2 && !requestKey) {
      const timeoutId = setTimeout(() => startProcess(), 500)
      return () => clearTimeout(timeoutId)
    }
    return undefined;
  }, [steps, requestKey, startProcess])

另请注意，setTimeout(() => startProcess(), 500) 简化为 setTimeout(startProcess, 500)。

consistent-return for useEffect

consistent-return for useEffect

reactjs

eslint