redux 的问题在“OnClick”事件中时不会重新渲染组件

Question

我的英语不是很好抱歉 顺便说一句，我正在使用 rac+redux

反应代码：

import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import githubLogo from "../assets/github.png";
import { useSelector, useDispatch } from "react-redux";
import store from "../assets/Store/store";
export default function NavBar() {
  const x = useSelector((state) => state.layout)
  console.log(x)
  useGSAP(() =>
    gsap.from(".nav-bar-item", {
      y: -100,
      stagger: {
        amount: 0.5,
        grid: [1, 1],
        from: "center",
      },
    })
  );
  const dispatch = useDispatch()
  const main = () => {
    dispatch({type:"Main"})
  }
  const blog = () => {
    dispatch({type: "Blog"})
  }
  const about = () => {
    dispatch({type: "About"})
  }
  return (
    <section className="nav-bar flex justify-between p-3">
      <div className="h-fit">
        <h1 className="nav-bar-item text-yellow-600 text-5xl font-bold">N0</h1>
      </div>
      <div className="flex gap-x-6 text-xl nav-bar-layouts h-fit p-3">
        <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>
      </div>
      <div className="h-fit">
        <a href="https://github.com/nfrx1" target="blank">
          <img
            src={githubLogo}
            className="nav-bar-item bg-white rounded-full border-zinc-950 w-16 h-16"
            alt="github"
          ></img>
        </a>
      </div>
    </section>
  );
}

import { createStore } from "redux";

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

const store = createStore(reducer)
export default store

}`

const store = createStore(reducer) 导出默认存储 `

当我使用调度出

OnClick

事件时，它起作用并重新渲染，但是当我在“OnClick”事件中使用它时，它会更改布局，但不会重新渲染组件

我尝试使用

useSelector

和反应工具包

Answer 1

NavBar 组件中单击时不重新渲染的问题似乎源于对如何在 React 中正确分配单击事件处理程序的误解。您当前在组件的渲染过程中立即调用处理程序函数，而不是将它们指定为由单击事件触发。

当您使用 onClick={about()} 时，您将在组件呈现后立即调用 about 函数，并且其返回值（如果有）将被设置为事件处理程序。这通常不是您想要的，除非 about() 返回另一个应该处理该事件的函数。正确的方法是将函数引用本身传递给事件处理程序而不调用它，例如 onClick={about}。

这是组件中的正确方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
function NavBar() {
  const dispatch = useDispatch();

  // Action dispatchers defined as functions
  const main = () => {
    dispatch({ type: "Main" });
  };
  const blog = () => {
    dispatch({ type: "Blog" });
  };
  const about = () => {
    dispatch({ type: "About" });
  };

  return (
    <section>
        <button onClick={main}>
          Main
        </button>
        <buttononClick={about}>
          About
        </button>
        <button onClick={blog}>
          Blog
        </button>
    </section>
  );
}

• onClick={handler}：此语法正确地将 handler 引用的函数分配为按钮单击事件的事件处理程序。这意味着只有单击按钮时才会调用处理程序。

• onClick={handler()}**：这会在渲染期间错误地调用 handler` 并将其返回值指定为事件处理程序，这不是预期的行为，除非返回值本身是一个旨在处理点击的函数。

在 onClick 属性中使用箭头函数对于包含附加逻辑或将参数直接传递给处理函数非常有用。例如：

<button onClick={() => about('Additional info')}>
  About
</button>

这允许您在单击时使用特定参数或多个语句自定义处理程序函数调用，例如：

<button onClick={() => { console.log('Button clicked'); about(); }}>
  About
</button>

虽然处理程序中的箭头函数由于在每次渲染上重新创建而可能会对性能产生轻微影响，但它们为更复杂的交互提供了灵活性，并且通常可以安全地用于 UI 事件处理。