使用本地 JSON api react TS Axios

我正在try 使用AXIOS将一个测试JSON服务器连接到我的前端RESPECT.我看到网络判断中的对象，但站点上没有显示任何内容.

我想可能是 map 的问题吧？当我搬走的时候？我在控制台中看到一个错误."未捕获的类型错误:无法读取未定义的属性(正在读取‘map’)"状态代码显示为200，我看到预览和响应.我对打字和react 都是超级新手，所以我不太确定问题出在哪里.感谢您的理解！

头戴式耳机首次亮相

import axios from "axios";
export default axios.create({
  baseURL: "http://localhost:3000/",
  method: "GET",
});

使用测试

import { CanceledError } from "axios";
import { useEffect, useState } from "react";
import 头戴式耳机首次亮相 from "./api-client";

export interface Title {
  title_id: number;
  title_name: string;
  title_description: string;
}

interface FetchTitleResponse {
  count: number;
  results: Title[];
}

const 使用测试 = () => {
  const [titles, setTitles] = useState<Title[]>([]);
  const [error, setError] = useState("");

  useEffect(() => {
    const controller = new AbortController();

    头戴式耳机首次亮相
      .get<FetchTitleResponse>("/titles", { signal: controller.signal })
      .then((res) => setTitles(res.data.results))
      .catch((err) => {
        if (err instanceof CanceledError) return;
        setError(err.message);
      });
    return () => controller.abort();
  }, []);
  return { titles, error };
};

export default 使用测试;

APP

import 使用测试 from "./使用测试";

function App() {
  const { titles, error } = 使用测试();

  return (
    <div>
      {error && <div>{error}</div>}
      hi
      <ul>
        {titles?.map((title) => (
          <li key={title.title_id}>{title.title_name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

JSON example. I'm mainly just trying to see if I can connect to a JSON file before my group mate finishes the API个

objects show in network preview, and heading is reading 200个

response image, Note: on the JSON I changed the name from titles to results with no luck个