0

当我将鼠标悬停在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 />
    </>
  );
}
4

1 回答 1

1

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

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

我已经在您的 CodeSandBox 链接上对其进行了测试，并且它有效。

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

于 2021-09-25T15:50:54.510 回答