我正在尝试混音和哦男孩..我坚持创建一个简单的计数器(单击按钮增加计数)
我想我不应该使用 useState 钩子,所以我用 loader 和 action 试试运气,因为我相信这是应该在 Remix 中处理的地方
我的组件上有:
export default function Game() {
const counter = useLoaderData();
return (
<>
<div>{counter}</div>
<div>
<Form method="post">
<button type="submit">click</button>
</Form>
</div>
</>
);
}
服务器:
import { ActionFunction, LoaderFunction } from 'remix';
let counter: number = 0;
export const loader: LoaderFunction = async () => {
console.log('game object!', counter);
return counter;
};
export let action: ActionFunction = async ({ request, params }) => {
console.log('[action] game object!', ++counter);
return counter;
};
上面的代码将在每次点击时将计数器始终重置为 0
查看了一些存储库,我可以找到存储在 Cookie/DB/SessionStorage 等中的存储库,但是如果我只想为我的 UI 设置一个简单的状态怎么办?