使用Token调用API获数据并通过Material-UI表格渲染遇402错误及展示问题

问题 #

通过Token调用API获取对象数组，并用Material-UI的DataGrid组件展示数据时遇到以下问题：

• 控制台报错：Uncaught (in promise) SyntaxError: Unexpected token 'A', "Access den"... is not valid JSON
• GET请求https://api.factarni.tn/article返回402状态码
• Postman测试API可正常返回所需数据，但无法在页面渲染表格

相关代码 #

import { DataGrid } from "@mui/x-data-grid";
import { userColumns} from "../../datatablesource";
import { Link } from "react-router-dom";
import AddBusinessIcon from "@mui/icons-material/AddBusiness";
import { useEffect, useState } from "react";

const Datatable = () => {
  const [data, setData] = useState({});

  const handleDelete = (id) => {
    setData(data.filter((item) => item.id !== id));
  };

  useEffect(() => {
    fetch("https://api.factarni.tn/article", {
      method: "GET",
      headers: {
        Authentication:
          "Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6ImFkMWIxOWYwZjU4ZTJjOWE5Njc3M2M5MmNmODA0NDEwMTc5NzEzMjMiLCJ0eXAiOiJKV1QifQ.eyJuYW1lIjoibW9oYW1lZCIsImlzcyI6Imh0dHBzOi8vc2VjdXJldG9rZW4uZ29vZ2xlLmNvbS9mYWN0YXJuaSIsImF1ZCI6ImZhY3Rhcm5pIiwiYXV0aF90aW1lIjoxNjYwNzIzNDA5LCJ1c2VyX2lkIjoiQ3hKejMwR1ExYlVLMVd0SjdDa1NVUzJ4NW5rMSIsInN1YiI6IkN4SnozMEdRMWJVSzFXdEo3Q2tTVVMyeDVuazEiLCJpYXQiOjE2NjA3MjM0MDksImV4cCI6MTY2MDcyNzAwOSwiZW1haWwiOiJpZHJpc3Ntb3VoYW1lZDg0MUBnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJpZHJpc3Ntb3VoYW1lZDg0MUBnbWFpbC5jb20iXX0sInNpZ25faW5fcHJvdmlkZXIiOiJwYXNzd29yZCJ9fQ.XoDs7DEYWQm9AwWFEbR7CtKpgvTh_zH8E5V1e8nUp5OwQT3hjKMUBFRCa7p_v-1TXAF5VoSDGTt0vZRgtPj6u7mIzagi0CPkuQYVyUkhHo2wBOV-IHbCRTqg-M4d6WDQvfSp1C0OzUnEg8eduUr7F7znuLnAUZQKBZ_Xp9ogj8aAZo-R8Na0HE5h0L9fIslD9UFBj2192EVebpb2DJir16beotXpd04d_qC1WCrN3WMsWdvgl2BRrTiG6SkqqwZH1hZzNkajNtIrhpYLnSOBoE3SsiIczvctqexynxmlle7gWaBN22t1M3sk3NHCkdfkSrXRi3PIBr71qw2QWltkyA",
      },
    })
      .then((response) => response.json())
      .then((json) => console.log(json))
      .then((response) => setData(response));
  }, []);

  return (
    <div className="datatable">
      <DataGrid
        className="dataGrid"
        rows={data}
        columns={userColumns}
        pageSize={9}
        rowsPerPageOptions={[9]}
        checkboxSelection
      />
    </div>
  );
};

export default Datatable;

Postman返回示例 #

[
    {
        "id": 5,
        "code": "t",
        "article": "tawla",
        "price": 10,
        "vat": null,
        "status": 1,
        "company_id": 12
    },
    {
        "id": 6,
        "code": "ttt",
        "article": "tawla",
        "price": 10,
        "vat": null,
        "status": 1,
        "company_id": 12
    }
]

解决方法 #

1. 修复请求头名称错误 #

402状态码和"Access denied"提示的核心原因是身份验证失败：代码中使用的请求头键名是Authentication，而标准JWT认证的请求头键名应为Authorization，这是和Postman配置的关键差异。

修改headers部分：

headers: {
  Authorization: "Bearer 你的Token内容",
},

2. 修正Promise链的返回值 #

当前代码中console.log(json)没有返回值，导致下一个then的response为undefined，最终setData会把状态设为undefined，DataGrid无法渲染。需调整Promise链：

.then((response) => response.json())
.then((json) => {
  console.log(json);
  return json; // 必须返回数据供后续then使用
})
.then((response) => setData(response));

3. 初始化状态为数组 #

API返回的是数组，但代码中useState({})初始化了对象，后续filter方法会报错（对象无filter方法）。应初始化为空数组：

const [data, setData] = useState([]);

4. 添加错误处理逻辑 #

为避免API返回非JSON内容导致的语法错误，需添加响应状态校验和异常捕获：

useEffect(() => {
  fetch("https://api.factarni.tn/article", {
    method: "GET",
    headers: {
      Authorization: "Bearer 你的Token内容",
    },
  })
  .then((response) => {
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    return response.json();
  })
  .then((json) => {
    console.log(json);
    setData(json);
  })
  .catch((error) => {
    console.error("获取数据失败：", error);
  });
}, []);

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