Неперехваченная ошибка: слишком много повторных отрисовок в React - PullRequest
Новая
       70

Неперехваченная ошибка: слишком много повторных отрисовок в React

0 голосов
/ 05 мая 2020

Это мой код. Home. js Я использовал перехватчики react-redux useSelector и useDispatch для использования запросов состояния и отправки. 

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 файл, есть ссылка. Пока не нажму кнопку, все работает нормально. Редукторы тоже работают нормально. Все редукторы настроили состояние идеально, но когда я нажимаю на кнопку, отображается 

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

1 Ответ

0 голосов
/ 05 мая 2020

Ваша проблема заключается в компоненте «Главная» сразу после назначения отправки. Вы вызываете отправку с двумя действиями в определении компонента. Если вы хотите, чтобы эти действия запускались при монтировании, поместите их в ловушку 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. Официальные документы для этого хука: здесь .

Мне также приходит в голову (учитывая имена ваших функций), что вы пытаетесь вызвать репо для получения избранных комнат, загрузить результат в магазин, затем выберите его в магазине, затем передайте компоненту FeaturedRoom. В таком случае я бы рекомендовал обернуть Home в компонент, который вызывает вызов при монтировании и загружает хранилище redux. Затем дочерний компонент может использовать ловушку useSelctor в сочетании с ловушкой useEffect (для отслеживания изменений в части хранилища 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, вы можете поместить этот logi c в другой useEffect в компоненте FeaturedRoom.

...