Object文本只能指定已知属性，并且类型“”Headers“”中不存在“”app-id“”

Question

下面是我从远程服务器获取数据的代码。

import * as React from 'react';
import { useEffect, useState } from 'react';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import TextField from '@mui/material/TextField';
import { styled } from '@mui/material/styles';

const URL = process.env.REACT_APP_URL;
const API = process.env.REACT_APP_API;
const APPID = process.env.REACT_APP_APPID;

const PageTitle = styled(Typography)({
    fontSize: '30px',
    marginBottom: '20px',
});

const SearchField = styled(TextField)({
    width: '100%',
});

export default function Search() {
    const [filterableData, setfilterableData] = useState();

    useEffect(() => {
        async function fetchData() {
            const response = await fetch(`${URL}${API}`, {
                method: 'GET',
                headers: {
                    'app-id': APPID,
                },
            });         const data = await response.json();
            console.log(data);
        }
        fetchData();
    });

    const search = (event) => {
        console.log(event.target.value);
    };

    return (
        <Container maxWidth="lg">
            <PageTitle>Search</PageTitle>
            <SearchField
                id="outlined-search"
                label="Enter search query"
                type="search"
                onChange={search}
            />
        </Container>
    );
}

它在错误下面抛出。

Type '{ 'app-id': string | undefined; }' is not assignable to type 'HeadersInit | undefined'.
  Type '{ 'app-id': string | undefined; }' is not assignable to type 'undefined'.  TS2322

    26 |            const response = await fetch(`${URL}${API}`, {
    27 |                method: 'GET',
  > 28 |                headers: {
       |                ^
    29 |                    'app-id': APPID,
    30 |                },
    31 |            });

在互联网上搜索，我得到的解决方案与制作界面等相关，但这些解决方案对我来说都不起作用。你知道怎么解决这个问题吗？

Answer 1

您应该尝试使用Headers类

​

const headers = new Headers();
if(APPID) {
  headers.set('app-ip', APPID);
}


async function fetchData() {
  const response = await fetch(`${URL}${API}`, {
    method: 'GET',
    headers
});  

​

Answer 2

headers: {
  'app-id': APPID as string,
},

上面解决了我的问题。

Answer 3

这似乎是lib.dom.d.ts中的一个错误，但您仍然有一些选择来解决它。

• 类型断言。

    fetch({
        headers: {'app-id': APPID} as Headers
    })

• 忽略它。

    fetch({
      // @ts-ignore
      headers: {'app-id': APPID}
    })

• 使用报头Api。

fetch({ headers:新的Header({‘app-id’：APPID}) })

如果要使旧版浏览器兼容，应首先导入Headers polyfill。请注意，以下代码尚未经过测试。

  (function(){
    if(typeof Headers !== 'function') {
      window.Headers = function(headers: Record<string, string>){return headers}
    }
  })()

对于上面列出的解决方案，我最推荐使用类型断言。