屬性 'map' 在類型 '() => IterableIterator 上不存在<number> '</number>

Question

我正在嘗試將keys作為 React 道具傳遞：

import * as React from "react";
import { render } from "react-dom";

const keys: string[] = ["a", "b"];

function App({keys}: string[]) {
  return (
    <div>
      {keys.map((key: string) => (
        <li>{key}</li>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App keys={keys} />, rootElement);

但是，我收到以下錯誤：

類型“() => IterableIterator”上不存在屬性“map”。

類型“string[]”不可分配給類型“() => IterableIterator”。

為什么會這樣，如何解決？

直播代碼： https://codesandbox.io/s/changing-props-on-react-root-component-forked-9lj9ye?file=/src/index.tsx:0-341

Answer 1

您將整個道具輸入為string[]而不僅僅是keys 。 在 object 中嵌入keys道具：

function App({ keys }: { keys: string[]; }) {
  // ...

或者使用接口：

interface AppProps {
  keys: string[];
}

function App({ keys }: AppProps) {
  // ...

或者一個類型：

type AppProps {
  keys: string[];
}

function App({ keys }: AppProps) {
  // ...

進一步到 go： 類型別名和接口之間的區別