反应无限渲染循环

Question

我创建了一个需要在应用程序的多个部分中单独显示的组件-（在我的导航内部、主页和单独的路由上）。因此，我在此组件中的一个use中进行了所有操作调度（用于读取数据的api调用）效果：

useEffect(() => {
    dispatch(time.read())
    dispatch(pause.read())
    dispatch(travel.read())
    dispatch(distances.read())
}, [])

如您所见，此效果应该只运行一次（当组件装载时）。

在其他任何地方，我都不会在此组件内部或外部调度这些特定操作。

该组件在3个位置渲染（导航内部、其自身的时间路径和主组件内部）。我可以在导航内部同时在时间上渲染它，没有问题。它的作用应该是这样的（当我从导航中进行更改时，它们会实时镜像，因为它们都与redux绑定在一起）。最后是主页组件。

当我第一次尝试在主组件上渲染时，加载需要一段时间，然后我尝试通过v4地址（同一网络）从移动设备打开它，加载时间太长。此时，我的笔记本电脑开始听起来像直升机，所以我打开了htop，内存使用和CPU使用几乎达到了最大值，我打开了服务器日志，每秒看到数百个请求。以下是我如何在我的主组件中渲染此组件：

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。

这是我渲染Home组件的地方：

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. */
)

出于某种原因，即使我没有与应用程序交互，该组件也会不断地重复渲染。我已经检查过，看我是否从两个地方发送过可能导致此问题的相同操作，但我没有。我知道我没有付出太多，但在这个问题上真的没有那么多，我只是希望有人以前遇到过。我以前处理过无限渲染循环，它们通常很明显，也很容易解决，但这一个有点奇怪。

Answer 1

我已经解决了我的问题。我实际上使用的是我的根路由器的旧版本。js其中的主组件声明如下：

<Route path="/home" component={<Home user={this.props.user} />} />

我正在渲染的Home组件也是一个旧版本（它是一个类组件，而不是我在问题中编写的函数组件）。

所以这是导致问题的原因：

user prop在声明Home路由时向下传递，它保存state.user的值

然后在主页组件中，我使用MapStateTops，将用户映射到道具，并将其设置为状态。使用者当前用户。

这会导致user prop在渲染组件时声明一次，然后在渲染组件时更改，然后在下一次渲染时再次更改，依此类推。反应没有响应渲染循环的原因是因为userprop为每个渲染保存不同的值。