无法使用 setState 函数更新 Zustand 状态

Question

在 Comp1 中，当我将鼠标悬停在它上面时，我希望状态更改为 true（我将 true 参数传递给它）。我还想确保这样做不会导致 Comp2 组件重新渲染。

我的理解是，如果我喜欢 useStoreOnHover.setState({ onComp1: true }) 它应该可以工作，但它不会 :(

我也试过 const onComp1Set = useStoreOnHover((s) => s.onComp1Set) 但还是一样 :(

我能够让它工作的唯一方法是 const { onComp1Set } = useStoreOnHover() 但我试图避免这些类型的解构，因为它也会触发对其他组件的重新渲染。

实例：https://codesandbox.io/s/winter-grass-qxrv8

import create, { GetState, SetState } from "zustand";

type typeStoreOnHover = {
  onComp1: boolean;
  onComp1Set: (val: boolean) => void;

  onComp2: boolean;
};

export const useStoreOnHover = create<typeStoreOnHover>(
  (set: SetState<typeStoreOnHover>, get: GetState<typeStoreOnHover>) => {
    return {
      onComp1: false,
      onComp1Set: (val) => set({ onComp1: val }),

      onComp2: false
    };
  }
);

const Comp1 = () => {
  const onComp1 = useStoreOnHover.getState().onComp1;
  // const onComp1Set = useStoreOnHover((s) => s.onComp1Set);

  console.log("Comp 1", onComp1);
  return (
    <div
      onMouseEnter={() => {
        // onComp1Set(true);
        useStoreOnHover.setState({ onComp1: true });
      }}
    >
      Comp 1 {onComp1 ? "True" : "False"}
    </div>
  );
};

const Comp2 = () => {
  const onComp2 = useStoreOnHover((s) => s.onComp2);

  console.log("Comp 2", onComp2);

  return <div>Comp 2 </div>;
};

export default function App() {
  return (
    <>
      <Comp1 />
      <Comp2 />
    </>
  );
}

Answer 1

根据 zustand 文档，这应该是实际方法，

const onComp1 = useStoreOnHover((s) => s.onComp1);

我已经在您的 CodeSandBox 上测试过它 link 并且有效。

我不熟悉 zustand 库，但这可能对您有所帮助。

无法使用 setState 函数更新 Zustand 状态

Can't update Zustand state using setState function

state

reactjs

zustand