Question

我刚开始反应和尝试使用钩子，我遇到了一个问题，我使用 useEffect 将操作分派到 redux 存储。所以一切正常，但我面临的问题是每次我在主组件中渲染子组件时，它都会调度动作。就像有些卡片基本上是子组件一样，每当我单击它们以显示更多详细信息时，它都会调度父组件中的操作，如果我关闭组件，那么我的问题是如何防止这种情况发生并仅呈现项目一次。如果您需要任何其他代码，请告诉我..

父组件

amessihel@tizighennif.tg:~$ alias spwd='echo "$(whoami)@$(hostname --fqdn):$PWD"'
amessihel@tizighennif.tg:~$ spwd 
amessihel@tizighennif.tg:/home/amessihel

Github 存储库 Current code

Answer 1

感谢分享存储库！现在已经很清楚了。您正在使用链接并重新路由页面 - 因此尽管组件相同并且 UI 上没有重新绘制，但整个页面仍然会再次安装。这就是为什么每次你点击一张卡片时你的 useEffect 都会被触发（甚至当你关闭一张卡片时！）。

您的 UI 状态由 URL 中的路径管理 - 这确实是一种糟糕的做法 - 特别是考虑到您没有进行任何 API 调用以根据 URL 获取数据。

这是我的建议-

用 useState 钩子替换您当前从 URL 中读取的 pathID 变量：

const [activeGameID, setActiveGameID]=useState(null);

用常规 div 替换用于包装游戏的 Link 组件，并将其传递给 setActiveGameID 的 onClick 处理程序：

<Games>  
    {popular.map((popularGames) => (  
        <div
            onClick={() => setActiveGameID(popularGames.id)}  
            key={popularGames.id}  
        >  
            <Game
                name={popularGames.name}
                img={popularGames.background_image}
                rating={popularGames.rating}
                id={popularGames.id}
                key={popularGames.id}
                released={popularGames.released}
            />
        </div>
    ))}
</Games>```

我认为您可能面临的问题是您的动画依赖于 URL 更改 - 在这种情况下，我会敦促您使用其他方式为您的卡片设置动画。

每次渲染子组件时都会分派动作

1 个答案: