输入 'Map<String, Pod[]> | undefined' 不能分配给类型 '{ [key: string]: Pod[]; }'

如何解决输入 'Map<String, Pod[]> | undefined' 不能分配给类型 '{ [key: string]: Pod[]; }'

我一直在尝试使用映射来存储来自两个不同提供商的代理的响应，以便更容易地查找它们，因为它们将存储在哈希映射中。例如：

let proxies = new Map<String,Pod[]>();
proxies.get("my-provider");

但是，当我尝试使用带有打字稿的 react useState 钩子将数据呈现到页面时，显然类型不同。我的类型定义如下：

export interface Pod {
  pod: number;
  timestamp: string; <- ISO UTC timestamp
  status: string; <-- 200 OK,4xx,5xx etc.
}

export interface PodProvider {
  provider: {
    [key: string]: Pod[]; <- indexed map containing a list
  }
}

我有一个 useEffect 钩子，它在组件加载时调用一个方法来探测代理，然后将响应添加到哈希映射以及一个唯一的键来标识所述代理的提供者，如下所示：

const [response,setResponse] = useState<Map<String,Pod[]>>();

useEffect(() => {
  const goprobe = async () => {
    const results = await probe(provider1Proxies);
    proxies.set("provider1",results);
    setResponse(proxies);
  }
  goprobe();
},[]);

最后，如何将状态渲染到 DOM 的逻辑在一个单独的组件中提供，如下所示：

export const Logger: React.FC<PodProvider> = ({ provider },identifier: string) => ( <- notice the type used here
  <React.Fragment>
    <Table size="small">
      <Caption>
        <XL>Log Output</XL>
      </Caption>
      <Head>
        <HeaderRow>
          <HeaderCell>Timestamp</HeaderCell>
          <HeaderCell>Pod</HeaderCell>
          <HeaderCell>Status</HeaderCell>
        </HeaderRow>
      </Head>
      <Body>
        {
          provider[identifier].flatMap((response,key) => {
            return (
              <Row key={key}>
                <Cell>{response.pod}</Cell>
                <Cell>{response.status}</Cell>
                <Cell>{response.timestamp}</Cell>
              </Row>
            );
          })
        }
      </Body>
    </Table>
  </React.Fragment>
);

我的问题是我做错了什么？为什么 Map 和 '{ [key: string]: Pod[]; } 不同的？如何修复代码以按预期执行？

谢谢:)

输入 'Map<String, Pod[]> | undefined' 不能分配给类型 '{ [key: string]: Pod[]; }'

如何解决输入 'Map<String, Pod[]> | undefined' 不能分配给类型 '{ [key: string]: Pod[]; }'

相关推荐