reactjs 我需要在一个zustand动作中调用一个钩子

to94eoyn 于 12个月前发布在 React

关注(0)|答案(1)|浏览(182)

如果用户在一个表中选择了大量的元素，我需要显示一个吐司_message。toast message函数是一个自定义钩子的返回，但是如果我在zustand中调用一个Hook，应用程序会给我一个错误“Invalid hook call. Hooks can only be called inside of the body of a function component.这可能是由于以下原因之一发生的：
1.你可能有不匹配的React版本和渲染器（比如React DOM）
1.你可能违反了钩的规则
1.你可能在同一个应用程序中有多个React副本。
我不能显示代码，因为是企业代码。
但我的问题是，是否有可能在zustand create或set中调用一个钩子？
我试图在create内部调用一个钩子，但在返回store状态之前。
例如在下面的代码中，但在我的代码中是一个自定义钩子而不是useState。

export const storeExample = create<{
  count: number;
  increaseCount: () => void;
}>()((set) => {
  const someState = useState("");
  return {
    count: 0,
    increaseCount: () => set((state) => ({ count: state.count + 1 })),
  };
});

字符串

reactjs

来源：https://stackoverflow.com/questions/76908725/i-need-to-call-a-hook-inside-a-zustand-action

1条答案

按热度按时间

7d7tgy0s1#

你不能直接使用zustand。根据这一点，你甚至可以在没有react的情况下使用zustand，根据zustand-Repository中的this讨论，其中一个维护者解释说：
Store定义是纯JS的。你想从store钩子创建一个新钩子。
这意味着您不能在还原器中使用Hooks。
他举了一个例子来说明如何解决这个问题：

const useCustomFetch = (path) => { ... }

const useFishStore = create((set) => ({
  fishies: {},
  setFishes: (fishes) => set({ fishes }),
}))

const useFishFetch = () => {
  const customFetch = useCustomFetch()
  const setFishes = useFishStore((state) => state.setFishes)
  return async (pond) => {
    const response = await customFetch(pond)
    set({ fishies: await response.json() })
  }
}

字符串
这里还有一个例子，你可以将customFetch输入到store action中，但仍然在你的store外部使用一个单独的Hook。在这种情况下，你需要注意这个action依赖于customFetch作为外部的arg输入，这最终意味着它不能被直接调用。

const useCustomFetch = (path) => { ... }

const useFishStore = create((set) => ({
  fishies: {},
  fetch: async (pond, customFetch) => {
    const response = await customFetch(pond)
    set({ fishies: await response.json() })
  },
}))

const useFishFetch = () => {
  const customFetch = useCustomFetch()
  return (pond) => useFishStore.getState().fetch(pond, customFetch)
}

型

赞(0）回复(0）举报 12个月前

我来回答

reactjs 我需要在一个zustand动作中调用一个钩子

1条答案

相关问题

热门标签

最新问答