为什么“inc”按钮不起作用,但其他按钮起作用?我是否遗漏了什么,或者这就是 Zusand Store 应该工作的方式?
我要渲染的页面
import React from "react";
// import store from "./store";
import { useStore } from "./zustandStore/store";
export default function App() {
const AddAModel = () => {
const inc = useStore((state) => state.bears);
console.log(inc);
};
function BearCounter() {
const bears = useStore((state) => state.bears);
return <h1>{bears} around here ...</h1>;
}
function Controls() {
const increasePopulation = useStore((state) => state.increasePopulation);
return <button onClick={increasePopulation}>one up</button>;
}
return (
<div>
APP
<div>
<button onCLick={AddAModel}>inc</button>
{Controls()}
{BearCounter()}
</div>
</div>
);
}
商店
import create from "zustand";
import { devtools } from "zustand/middleware";
let store = (set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
});
store = devtools(store);
export const useStore = create(store);
这是 Zusand 状态管理工具的链接: https ://github.com/pmndrs/zustand