反应无限渲染循环

Question

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

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

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

在该组件内部或外部，我不会在其他任何地方发送这些特定操作。

此组件在 3 个位置呈现（在导航内部、在它自己的 /time 路由中和在主页组件内部）。我可以同时在导航内部和 /time 上渲染它而不会出现问题。它按应有的方式运行（当我从导航中进行更改时，它们会在 /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.

这是我渲染 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. */
)

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

Answer 1

我的问题已经解决了。我实际上使用的是 RootRouter.js 的旧版本，它的 Home 组件声明如下：

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

而我渲染的Home组件也是旧版本（是class组件，不是我题中写的函数组件）

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

user prop是在声明Home路由时传递下来的，它持有state.user

的值

然后在 Home 组件中，我使用 mapStateToProps 并将 user 映射到 props，并将其设置为 state.user.currentUser。

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

反应无限渲染循环

React infinite render loop

javascript

infinite-loop

reactjs

redux