Remix V2 useLoaderData 在开发模式下运行时出现问题

Question

在基本的 Remix V2 应用程序中，我需要帮助了解以下行为是否是预期行为、V2 中的错误，或者可能缺少配置选项或设置。

当通过

npx run dev

在开发模式下运行时，我看到

useLoaderData

钩子接收 JavaScript 对象声明作为其值，而不是 JSON。

我在 Remix 文档中找不到与此问题相关的任何内容。

重现问题的完整详细信息：

我通过运行

npx create-remix@latest

创建了一个演示 Remix V2 应用程序

我编写了一个用于基本测试的模拟 API 后端方法，该方法仅返回从 JSON 文件检索到的 JSON 数据：

export async function getStoredNotes() {
  const rawFileContent = await fs.readFile('notes.json', { encoding: 'utf-8' });
  const data = JSON.parse(rawFileContent);
  const storedNotes = data.notes ?? [];
  return storedNotes;
}

客户端由 2 个简单的路线组成，

index

和

notes

，我定义了 2 个

NavLink

导航组件：

import { NavLink } from '@remix-run/react';
...
<NavLink to="/">Home</NavLink>
<NavLink to="/notes">Notes</NavLink>

在

notes

路线中，我定义了以下

loader

函数，该函数调用我的模拟 API 方法：

export const loader:LoaderFunction = async () => {
  try {
    const notes = await getStoredNotes();
    return json(notes);

  } catch (error) {
    return json({ errorMessage: 'Failed to retrieve stored notes.', errorDetails: error }, { status: 400 });
  }
}

在

notes

主要组件函数中，我使用

useLoaderData

挂钩接收该数据，并尝试将返回的 JSON 数据打印到控制台：

export default function NotesView() {

  const notes = useLoaderData<typeof loader>();

  console.log(notes);

  return (
    <main>
      <NoteList notes={notes as Note[] || []} />
    </main>
  )
}

当我运行

npx run build

以及随后的

npx run serve

时，一切都正常工作：

初始页面加载成功接收数据并将值以 JSON 形式打印到控制台。

{"notes":[{"title":"my title","content":"my note","id":"2024-03-28T05:22:52.875Z"}]}

通过

index

组件在

notes

和

NavLink

路由之间的后续导航客户端也可以正常工作，这样我就可以看到相同的数据打印到控制台。

当我通过

npx run dev

在开发模式下运行时出现问题，如下所示：

来自服务器的初始页面加载确实正确加载并按预期将 JSON 打印到控制台：

使用

index 组件在 notes

 和 

NavLink

 路线之间的

后续导航客户端

不会将 JSON 数据打印到控制台。相反，我看到 JavaScript 对象声明打印到控制台，字面意思如下：

export const notes = [
    {
        title: "my title",
        content: "my note",
        id: "2024-03-28T05:22:52.875Z"
    }
];

在

dev

模式下运行时，这是预期的行为吗？ 我可以做什么来解决这个问题？

Answer 1

嗯...我不确定你为什么会得到这些结果。你绝对不应该从

useLoaderData

获得“代码”。

这是一个 ⚡️ StackBlitz，显示它可以正常工作。如果您仍然遇到问题，您可以发布一个显示错误的简单存储库吗？

https://stackblitz.com/edit/remix-run-remix-xhfw3r?file=app%2Froutes%2Fnotes.tsx