未捕获的错误：反应中的重新渲染过多

Question

这是我的代码。 Home.js 我使用了 react-redux 钩子 useSelector 和 useDispatch 来使用 state 和调度请求。

import React from 'react'
import StyledBanner from '../../components/StyledBanner';
import FeaturedRoom from './FeaturedRoom';
import Hero from '../../components/Hero'
import {useDispatch, useSelector} from 'react-redux'
import {fetchRooms, fetchFeatured} from '../../redux'


function Home() {
    const dispatch = useDispatch()
    dispatch(fetchRooms())
    dispatch(fetchFeatured())
    const featuredRooms = useSelector(state=>state.roomReducer.featuredRooms)
    return (
        <div className="container-fluid p-0">
            <Hero>
                <StyledBanner title="best rooms" subtitle="subtitle">
                    <div className="subtitle">
                    </div>
                    <button className="btn btn-warning">Rooms</button>
                </StyledBanner>   
            </Hero>
            <FeaturedRoom featuredRooms={featuredRooms}/>
        </div>
    )
}

export default Home

这是 FeaturedRoom.js

import React from 'react'
import StyledTitle from '../../components/StyledTitle';
import StyledButton from '../../components/StyledButton'
import {Link} from 'react-router-dom'

export function FeaturedRoom({featuredRooms}) {
    return (
        <div className="mt-3  mb-3 featured-container">
            <div className="featured-wrapper">
                <StyledTitle title="featured rooms"/>
                <div className="featured-rooms">

                    {
                        featuredRooms.map(room=>(
                            <div key={room.id} className="featured-item">
                                <div className="price-tag">
                                    <span>Rs {room.price}</span>
                                    <span>per night</span>
                                </div>
                                <img src={room.images[0]} className="img-fluid" alt="featured-img"/>
                                <Link to="/"><button>Room</button></Link>
                                <div className="room-name">
                                    {room.name}
                                </div>
                            </div>
                        ))
                    }


                </div>
            </div>
        </div>
    )

}

export default FeaturedRoom

在 FeaturedRoom.js 文件的第二部分中，有“链接”。 在我单击按钮之前，一切正常。 减速机也工作正常。 所有减速器都完美地设置了 state 但是，当我点击按钮时，它说

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
    at renderWithHooks (react-dom.development.js:14815)

Answer 1

您的问题在于调度分配之后的 Home 组件。 您正在使用组件定义中的两个操作调用调度。 如果您希望在挂载时触发这些操作，请将它们放在useEffect挂钩中。

import React, { useEffect } from 'react'
import StyledBanner from '../../components/StyledBanner';
import FeaturedRoom from './FeaturedRoom';
import Hero from '../../components/Hero'
import {useDispatch, useSelector} from 'react-redux'
import {fetchRooms, fetchFeatured} from '../../redux'


function Home() {
    const dispatch = useDispatch();
    const featuredRooms = useSelector(state=>state.roomReducer.featuredRooms)

    useEffect(() => {
        dispatch(fetchRooms())
        dispatch(fetchFeatured())
    }, [dispatch])

    return (
        <div className="container-fluid p-0">
            <Hero>
                <StyledBanner title="best rooms" subtitle="subtitle">
                    <div className="subtitle">
                    </div>
                    <button className="btn btn-warning">Rooms</button>
                </StyledBanner>   
            </Hero>
            <FeaturedRoom featuredRooms={featuredRooms}/>
        </div>
    )
}

export default Home

在这种情况下，我们使用useEffect的方式与旧的componentDidMount类似。 该钩子的官方文档在这里。

我也想到（给定您的 function 名称）您正在尝试调用存储库以检索特色房间，将结果加载到商店，然后从商店 select 将其提供给FeaturedRoom组件。 如果是这种情况，我建议将Home包装在一个组件中，该组件在安装时调用，并加载 redux 存储。 然后，子组件可以使用useSelctor钩子，结合useEffect钩子（监视 store 的featuredRooms部分的变化）将结果提供给FeaturedRoom 。 我希望这有点清楚。

编辑：

好的，让我们试试这个，看看它是如何为你工作的。 在需要该数据的组件内移动选择器。 像这样的东西：

import React, { useEffect } from 'react'
import StyledBanner from '../../components/StyledBanner';
import FeaturedRoom from './FeaturedRoom';
import Hero from '../../components/Hero'
import {useDispatch, useSelector} from 'react-redux'
import {fetchRooms, fetchFeatured} from '../../redux'


function Home() {
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchRooms())
        dispatch(fetchFeatured())
    }, [dispatch])


    return (
        <div className="container-fluid p-0">
            <Hero>
                <StyledBanner title="best rooms" subtitle="subtitle">
                    <div className="subtitle">
                    </div>
                    <button className="btn btn-warning">Rooms</button>
                </StyledBanner>   
            </Hero>
            <FeaturedRoom />
        </div>
    )
}

export default Home


function FeaturedRoom() {
    const featuredRooms = useSelector(state=>state.roomReducer.featuredRooms);

    /*  .... the rest of your component ... */
}

如果您需要观察featuredRooms属性的变化，您可以将该逻辑放在FeaturedRoom组件内的另一个useEffect中。