Remix框架中loader数据无法传递至useLoaderData问题排查

一、Loader未触发的核心原因：Loader必须定义在路由文件中 #

Remix的loader函数仅在app/routes/目录下的路由文件中会被框架自动执行。当前你将loader放在组件文件（lecture-list.jsx）内，框架无法识别，因此不会触发该函数，导致useLoaderData()返回null。

修复方式：

• 将loader移动到对应的路由文件中；
• 或者直接将该组件作为路由组件，放在app/routes/目录下（例如重命名文件为app/routes/lecture-list.jsx）。

二、修复getDataFromReqRes函数的多个错误 #

数据获取函数存在3个关键问题，导致无法正确返回姓名列表：

1. 错误解析响应：使用JSON.stringify(res)会将整个Response对象转为字符串，而非解析响应体，应使用res.json()解析JSON响应；
2. 未初始化数组：listOfNames未初始化为空数组，直接调用push会抛出错误；
3. 数据路径错误：ReqRes API返回结构为{ data: [...] }，需从解析后的对象中获取data字段。

修复后的函数代码：

export const getDataFromReqRes = async () => {
  let res = await fetch("https://reqres.in/api/users?page=2");
  let rawData = await res.json();
  let listOfNames = [];
  rawData.data.forEach((person) => listOfNames.push(person.first_name));
  return listOfNames;
};

三、优化组件的空值安全与key值 #

1. 空值安全处理：为useLoaderData()设置默认空数组，避免因返回null/undefined导致length读取报错；
2. 优化key值：使用indexOf作为key不稳定，改用更具唯一性的标识（如姓名+索引组合，若能获取用户ID则优先用ID）。

修复后的组件代码：

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

export default function LectureList() {
  let nameList = useLoaderData() || [];

  return (
    <main>
      {nameList.length ? (
        <ul>
          {nameList.map((name, index) => (
            <li key={`${name}-${index}`}>{name}</li>
          ))}
        </ul>
      ) : (
        <p>No Data Found</p>
      )}
    </main>
  );
}

// 仅当文件位于app/routes/目录下时，该loader才会被触发
export const loader = async () => {
  let listOfNames = await getDataFromReqRes();
  console.log(listOfNames);
  return listOfNames;
};

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