Remix.run中loader函数未返回数据，useLoaderData获值为null

问题说明 #

在Remix.run项目中，通过loader()函数调用getListLectures()获取数据，单独调用该函数能正常返回列表，但通过useLoaderData钩子接收时拿到的却是null，无法遍历渲染列表。

相关代码 #

路由组件代码 #

import { useLoaderData } from "@remix-run/react";
import { getListLectures } from "../Shared/getStoredNotes";

export default function LectureList() {
let lectures = useLoaderData();
//   console.log(getListLectures());
console.log("this is lecture " + lectures);
return (
<main>
  {lectures ? (
    <ul>
      {lectures.map((eachLecture) => (
        <li key={lectures.indexOf(eachLecture)}>{eachLecture}</li>
      ))}
    </ul>
  ) : (
    <p>No Data Found</p>
  )}
</main>
);
}

export const loader = async () => {
let lectures = await getListLectures();
console.log(lectures);
return lectures;
};

getListLectures函数代码 #

import { Course } from "../../Data/Courses";

export const getListLectures = async () => {
  let lecture_list = [];
  Course.forEach((course) => {
    course.course_section?.forEach((section) => {
      section.section_lectures?.forEach((lecture) => {
        lecture_list.push(lecture?.lecture_name);
      });
    });
  });
  return lecture_list;
};

问题排查与解决方案 #

1. 核心原因：组件未作为路由组件加载 #

Remix的loader函数仅对路由层级的组件生效，如果这个LectureList是被其他组件import的普通子组件，loader不会被执行，useLoaderData自然返回null。

解决办法：
把LectureList配置为路由组件，比如将文件放在app/routes/目录下（如app/routes/lectures.jsx），确保它是Remix路由系统的一部分。

2. 代码优化建议 #

• 替换key值：不要用lectures.indexOf(eachLecture)作为key，若列表有重复元素会导致key冲突。直接用eachLecture作为key（前提是lecture_name唯一），或者给每个lecture添加唯一id字段。
• 更严谨的空值判断：用lectures?.length > 0替代简单的lectures ?，避免空数组时显示"No Data Found"。

修改后的组件代码：

import { useLoaderData } from "@remix-run/react";
import { getListLectures } from "../Shared/getStoredNotes";

export default function LectureList() {
  const lectures = useLoaderData();
  console.log("Loaded lectures:", lectures);

  return (
    <main>
      {lectures?.length > 0 ? (
        <ul>
          {lectures.map((lectureName) => (
            <li key={lectureName}>{lectureName}</li>
          ))}
        </ul>
      ) : (
        <p>No Data Found</p>
      )}
    </main>
  );
}

export const loader = async () => {
  const lectures = await getListLectures();
  console.log("Loader returned:", lectures);
  return lectures;
};

3. 验证数据可序列化性 #

Remix要求loader返回的数据必须是可JSON序列化的，若getListLectures返回的数组包含函数、Symbol等不可序列化内容，会导致数据传递失败。可以在loader中添加JSON.stringify(lectures)测试，若报错则需要清理数据中的不可序列化元素。

内容的提问来源于stack exchange，提问作者Harshad Tekwani