加载器和amp之间共享对象；在remix.run中调用操作后，操作不会更新？

Question

我有一个模拟数据库，可以使用一些装载机和操作。

这是粗略的布局：

const db = { key: "bar" }

export const action = async ({ request }) => {
     db.key = "foo"
}

export const loader = async ({ request }) => {
    return json(db)
}

不过我有一个问题。当调用操作时，它成功更新了db.key，但是，加载程序后来被调用。该值是{键：“ bar”}。有人知道为什么再次调用加载程序时未更新对象吗？

Answer 1

我认为与” data写作“ 主题”。
每当提交表单时，它都会重新加载页面上所有路由的所有数据。这就是为什么许多人访问Redux等全球州管理库的原因。

我不知道它是否有帮助，但是在这里我有一种简单的方式可以在其中发送发布请求，使用操作对其进行更新并加载与加载程序一起在URL上搜索的内容。

export const action: ActionFunction = async ({ request }) => {
  const form = await request.formData();
  const key = form.get("key");
  return redirect(`/?key=${key}_updated`);
};

export const loader: LoaderFunction = async ({ request }: any) => {
  const url = new URL(request.url);
  const key = url.searchParams.get("key");
  return json({ key });
};

export default function Index() {
  const loaderData = useLoaderData();
    
  return (
    <div>
      <span>loaderData: {loaderData.key}</span>
      <Form method="post">
        <input type="text" id="key" name="key" defaultValue={loaderData.key} />
        <button>Submit</button>
      </Form>
    </div>
  );
}

Answer 2

我在remix v2.12中重新创建了您的示例，它起作用

示例1（更新对象）：

• https://stackblitz.com/edit/bolt/bolt-remix-5kch4u?file=pl = pile = prout = proutes%2f_index.tsx.tsx

对象数组）：

• https：/https：/ /stackblitz.com/edit/bolt-remix-yr4kxe?file=pp%2froutes%2f_index.tsx

我怀疑这是有效的，因为自从混音V1或帖子的时间以来，热重新加载机制是不同的。在V2中，它更聪明地检测更改

• docs： https ：//remix.run/docs/en/main/other-api/dev#remix-dev

• 视频： https //www.youtube.com/watch?v=ztrjaut9hlo

其他尖端：
大多数库和框架确实通过检查对象或数组是否已更改（ex：react）来更改检测。因此，通常情况下，如果您要在内存数据结构中使用，则要重新创建整个对象/数组，至少这通常是触发更改检测的一种方法

let obj = {test: 'test'} 
obj = {test: 'updated'}

let arr = [1,2,3]
arr = [...arr,4]