不要在 useEffect(...)、useMemo(...) 或其他内置 Hooks 中调用 Hooks（动态导入）

Question

const usePage = ({ page }) => {
  const prevPage = usePrevious(page)

  const [p, setPage] = useState()

  const loadData = async param => {
    const data = await import(`${param}`)
    setPage(data.default)
  }

  useEffect(() => {
    if (prevPage === page) return

    loadData(page)
  }, [page, prevPage])

  return {
    p
  }
}

const PageRoute = memo(({page}) => {
    const { p } = usePage({ page })

    const Page = p

    return (
      <Page/>
    )
  }
)

我真的不明白这个问题如何与我的代码相关。我不会在里面调用任何钩子useEffect。我该如何解决？我想在页面参数不等于前一个的情况下调用动态导入使用效果。

Answer 1

The problem is that since you're probably exporting a React component as default from these dynamically imported modules, data.default is a function which gets passed to the setter returned by useState.

然而，由于useStatesetter 也可以接收一个执行状态更新的函数，我敢打赌发生的事情是 setter 调用传递的函数，它是一个 React 组件 ( data.default)，它触发该组件中使用的钩子。所以你的电话实际上相当于setPage(prev => data.default(prev)).

这可以通过显式传递你自己的状态更新器来解决，它只返回data.default函数：

const loadData = async param => {
  const data = await import(`${param}`)
  setPage(() => data.default) // <-------
}