我创建了一个组件，该组件需要单独显示在应用程序的多个部分中(在导航内部、主页和单独的路线上(。因此，我在这个组件的useEffect:中进行了所有的动作调度(读取数据的api调用(
useEffect(() => {
dispatch(time.read())
dispatch(pause.read())
dispatch(travel.read())
dispatch(distances.read())
}, [])
正如您所看到的，这种效果应该只运行一次(当组件挂载时(。
在其他任何地方，我都不能在这个组件内部或外部调度这些特定的操作。
该组件在3个位置呈现(导航内部、其自己的/time路由和主组件内部(。我可以在导航内部和/time上同时渲染它，没有任何问题。它按照它应该的方式工作(当我从导航中进行更改时，它们会被镜像到on/time，因为它都是用redux绑定在一起的(。最后是Home组件。
当我第一次尝试在Home组件上渲染时，加载需要一段时间，然后我尝试通过v4地址(同一网络(从移动设备打开它，加载时间太长。这时，我的笔记本电脑开始听起来像直升机，所以我打开htop，内存使用率和CPU使用率几乎达到了极限，我打开服务器日志，每秒看到数百个请求。以下是我如何在Home组件中渲染此组件：
import React from "react"
import { useSelector } from "react-redux"
import { NavLink } from "react-router-dom"
import "./Home.css"
import {
FaCarCrash,
CgProfile,
AiOutlineShop,
TiVideo,
} from 'react-icons/all'
import Tracking from "../TimeTracking/Tracking" /*This is the component which causes all the toruble*/
export default function Home(props) {
const current = useSelector(state => state.user.currentUser)
return (
<div className="Home container">
<div id="links">
<NavLink to="/create_job/">
<FaCarCrash />
<p> CREATE JOB </p>
</NavLink>
<NavLink to={"/profile/" + current._id}>
<CgProfile />
<p> PROFILE </p>
</NavLink>
<NavLink to="/shop/view/">
<AiOutlineShop />
<p> SHOP </p>
</NavLink>
<NavLink to="/tutorials/">
<TiVideo />
<p> TRAINING </p>
</NavLink>
</div>
<Tracking /> /*This is the component which causes all the toruble*/
</div>
)
}
正如你所看到的，没有什么特别的——一个简单的功能组件，甚至不发送任何操作。这里只有与redux的通信是useSelector。
这是我渲染主页组件的地方：
import React, { Fragment } from 'react'
import { Route } from 'react-router-dom'
/*...other imports...*/
import Home from "../components/Mobile/Home"
/*...other imports...*/
export default props => (
<Fragment>
/*...other routes...*/
<Route path="/home" component={Home} />
/*...other routes...*/
</Fragment> /* just a fragment wrapper around the routes for the user. This component is later rendered inside of my <Router> </Router>. This is done because the app has a lot of different routes. */
)
出于某种原因，即使我不与应用程序交互，这个组件也会一次又一次地重新渲染。我已经检查过我是否从两个地方发送了可能导致此问题的相同操作，但我没有。我知道我没有付出太多，但这一期真的没有那么多，我只是希望有人以前遇到过。我以前处理过无限渲染循环，它们通常很明显，很容易解决，但这次有点奇怪。
我已经解决了我的问题。实际上，我使用的是RootRouter.js的旧版本，其中Home组件的声明如下：
<Route path="/home" component={<Home user={this.props.user} />} />
我正在渲染的Home组件也是一个旧版本(它是一个类组件，而不是我在问题中编写的函数组件(。
因此，以下是导致问题的原因：
user prop在声明Home路由时被传递，并且它保持state.user的值
然后在Home组件中，我使用mapStateToProps并将user映射到props，并将其设置为state.user.currentUser。
这导致user prop在渲染组件时声明一次，然后在渲染组件后更改，然后在下一次渲染时再次更改，依此类推。react没有响应渲染循环的原因是因为user道具为每个渲染保留不同的值。