如何在React项目中展示TypeScript请求配置文件内的title值

现有代码修正及使用步骤 #

1. 修复requests.ts的错误 #

你现有代码里有两处问题需要先调整：

• 接口关键字拼写错误：iterface要改为正确的interface
• 默认导出的请求配置没有关联类型，会导致TS类型提示失效

修正后的完整requests.ts代码：

const API_KEY = process.env.API_KEY

// 定义请求配置项的类型，适配你现有的fetchTrending结构
export interface RequestConfig {
  title: string
  url: string
}

// 原有的MyRes接口是接口返回值的类型，保留即可，注意拼写正确
export interface MyRes {
  title: string
  url: string
  key: number 
}

// 给默认导出的配置对象指定类型
export default {
  fetchTrending: {
    title: "Trending Movies",
    url: `/trendingmovies?api_key=${API_KEY}`
  },
} as Record<string, RequestConfig>

2. 在NavBar.tsx中渲染配置内的title属性 #

要展示请求配置里的title，直接从引入的request对象读取对应字段渲染即可，注意引入路径如果是本地文件要加相对路径前缀（比如./requests）：

import request, { MyRes } from "./requests"

function NavBar() {
  return(
    <nav>
      <div>
        {/* 直接渲染单个配置的title */}
        <h1>{request.fetchTrending.title}</h1>

        {/* 如果后续你加了更多请求配置，也可以遍历渲染所有title */}
        {Object.values(request).map(config => (
          <button key={config.url}>{config.title}</button>
        ))}
      </div>
    </nav>
  )
}
export default NavBar;

3. 如果你需要调用API拿后端返回的MyRes类型数据 #

后续需要发起请求拿后端返回的title，按这个逻辑写即可：

import { useEffect, useState } from "react"
import request, { MyRes } from "./requests"

function NavBar() {
  const [resData, setResData] = useState<MyRes | null>(null)

  // 组件挂载时发起请求
  useEffect(() => {
    const fetchApi = async () => {
      const response = await fetch(request.fetchTrending.url)
      const result: MyRes = await response.json()
      setResData(result)
    }
    fetchApi()
  }, [])

  return(
    <nav>
      <div>
        {/* 渲染接口返回的title */}
        {resData && <p>接口返回的title：{resData.title}</p>}
      </div>
    </nav>
  )
}
export default NavBar;

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