无法使用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链接上测试过了，它起作用了。

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