React中通过API按ID获取警员信息遇404错误求助

1. 路由参数名大小写不匹配 #

React Router的useParams是大小写敏感的。如果你的路由定义是类似/police-profile/:id（小写id），但代码里解构的是{ ID }（大写ID），那拿到的ID会是undefined，导致请求URL变成/admin/officers/undefined，直接返回404。

修复方法：
检查路由定义的参数名，确保和useParams里的变量名一致。比如路由用id，就修改代码：

const { id } = useParams();
// 同步修改请求URL
const response = await fetch(`https://crime-vault-database.onrender.com/admin/officers/${id}`);

2. 初始状态设置错误导致加载逻辑失效 #

你把policeOfficer的初始值设为true，这会导致if (!policeOfficer)永远不会触发，加载状态无法显示。而且如果API返回失败，policeOfficer还是true，页面会直接渲染并读取policeOfficer.firstName这类属性，进而引发报错。

修复方法：
将初始状态改为null或undefined，确保加载逻辑正常触发：

const [policeOfficer, setPoliceOfficer] = useState(null);

// 加载判断保持不变，此时会正确显示Loading
if (!policeOfficer) {
  return <div>Loading...</div>;
}

3. 确认API端点的正确性 #

直接在浏览器地址栏输入完整的API URL（比如https://crime-vault-database.onrender.com/admin/officers/123，替换123为实际存在的警员ID），验证是否能返回数据：

• 如果浏览器也返回404，说明后端API路径错误或该ID的警员数据不存在，需要检查后端路由配置或确认数据是否存在。
• 如果浏览器能返回数据，在前端的fetchPoliceOfficerDetails函数里添加打印，确认请求时的ID是否正确：

console.log('请求的警员ID:', ID);

确保打印的ID和URL中显示的一致。

4. 补充错误边界处理 #

当前代码仅打印错误状态，没有处理ID为空的情况，也没有给用户直观提示。可以补充逻辑：

const fetchPoliceOfficerDetails = async () => {
  if (!ID) {
    console.error('未获取到警员ID');
    return;
  }
  try {
    const response = await fetch(`https://crime-vault-database.onrender.com/admin/officers/${ID}`);
    if (response.ok) {
      const data = await response.json();
      setPoliceOfficer(data);
    } else {
      console.error('获取警员信息失败，状态码:', response.status);
      setPoliceOfficer(null); // 重置状态，显示加载提示或错误信息
    }
  } catch (error) {
    console.error('请求出错:', error);
    setPoliceOfficer(null);
  }
};

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