React+Redux点击事件中dispatch触发后组件不重新渲染问题求助

核心问题：按钮点击事件绑定错误 #

你的代码里，按钮的onClick属性直接执行了函数（比如onClick={main()}），这会导致组件渲染时就立即调用dispatch，而不是点击按钮时才触发。此时onClick实际接收的是main()执行后的返回值（undefined），所以点击按钮不会有任何反应，看起来像是state更新了但组件没重新渲染，本质是点击事件根本没绑定上。

修复步骤 #

1. 修正点击事件绑定：把onClick={main()}改成onClick={main}，传递函数引用而非立即执行函数。同理修改about和blog的绑定：

<button
  className="nav-bar-item relative"
  onClick={main}
>
  Main
</button>
<button
  className="nav-bar-item relative"
  onClick={about}
>
  About
</button>
<button
  className="nav-bar-item relative"
  onClick={blog}
>
  Blog
</button>

2. 设置Redux初始状态：你的reducer没有初始state，第一次调用时state为undefined，虽然目前逻辑能返回默认值，但显式设置初始状态更规范，避免潜在问题：

const initialState = { layout: "Main" };
const reducer = (state = initialState, action) => {
    if (action.type === 'Blog'){
        return { ...state, layout: "Blog" }
    }
    else if (action.type === 'About'){
        return { ...state, layout: "About" }
    }
    return state;
}

3. 优化useGSAP的依赖：useGSAP应该添加依赖数组，避免每次渲染都执行动画：

useGSAP(() =>
  gsap.from(".nav-bar-item", {
    y: -100,
    stagger: {
      amount: 0.5,
      grid: [1, 1],
      from: "center",
    },
  }),
  []
);

验证修复效果 #

修正后，点击按钮会正确触发dispatch更新state，useSelector会检测到state变化，组件会重新渲染。你可以通过console.log(x)看到每次点击后layout值的变化，确认组件重新渲染。

内容的提问来源于stack exchange，提问作者Nuymjy Bbbynu