在功能组件中使用 useEffect 的问题

Question

我试图在一个功能组件中使用 useEffect，该组件应该只在组件安装时运行，但它说：

<块引用>

钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了钩子规则
3. 您可能在同一个应用中拥有多个 React 副本，请参阅 https://reactjs.org/link/invalid-hook-call 以获取有关如何调试的提示 并解决这个问题。”

反应代码

反应错误：

Answer 1

将 render 中的 <Route ... /> 更改为 component。

https://stackoverflow.com/a/53936972/12101554

render 似乎不适用于 React Hooks，但 component 可以。

根据 StackOverflow 上的 @rishat，

<块引用>

[使用渲染道具] 节省您的运行时间，因为没有运行生命周期方法，...

来源：https://stackoverflow.com/a/48152635/12101554

useEffect() React Hook 类似于 React.Component 生命周期方法（componentDidMount、componentDidUpdate 和 componentWillUnmount 合二为一{加上更多} )，所以当你使用 render 时，Hooks 不起作用

The source code of react-router-dom also shows us this：

if (component)
  return match ? React.createElement(component, props) : null

if (render)
  return match ? render(props) : null

如您所见，当您使用 render 时，您实际上并未调用 React.createElement，因此 Hook 和生命周期方法不起作用。但是，当您使用 component 时，它们确实有效。