编辑：

Question

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

这是FeaturedRoom.js

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文件中，有“链接”。在单击按钮之前，一切正常。减速器也正常工作。所有的reducers都完美地设置了状态，但是当我单击按钮时，它说

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

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。该钩子的官方文档为here。

在我看来（给定您的函数名），您试图调用存储库以检索特色房间，将结果加载到商店中，然后从商店中选择结果，然后提供给{{ 1}}组件。如果是这种情况，我建议将FeaturedRoom包装在一个组件中，该组件将在挂载时进行调用，并加载redux存储。然后，子组件可以结合使用Home钩子和useSelctor钩子（以监视商店的useEffect部分中的更改）将结果馈送到{{ 1}}。我希望这很清楚。

编辑：

好，让我们尝试一下，看看它如何为您工作。将选择器移到需要该数据的组件内。像这样：

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中。

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

1 个答案:

编辑：