如何在typescript中設置map密鑰？

Question

我通過應用 typescript 使用 reactjs。我在 map 中使用，但是如果我給鍵一個唯一的數值，就會發生錯誤。 有人知道為什么嗎？

atom.js

export interface Person {
  id: Number;
  num: string;
  name: string;
  img: string;
}
....

export const filteredPersonList = selector({
  key: "filteredPersonListSelector",
  get: ({ get }) => {
    const filterType = get(filteredType);
    const filterSearch = get(filteredSearch);
    const person = get(person);

    if (filterSearch.length > 0 && filterType !== "all") {
      const filteredList = person
        .filter((p) =>p.name.includes(filterSearch))
        .filter((p) =>p.type.includes(filterType));
      return filteredList;
    } else if (filterSearch.length > 0 && filterType === "all") {

      return filteredList;
    } else if (filterType !== "all") {

      return filteredList;
    } else {
      return person;
    }
  },
});

import { Link } from "react-router-dom";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import styled from "styled-components";
import {
filteredPersonList
} from "../store/atom";

interface TypeItemComp {
  currentType: boolean;
}

export default function Main() {
  const [filterType, setFilterType] = useRecoilState(filteredType);
  const people = useRecoilValue(filteredPersonList);

  return (
    <MainContainer>
      <PersonContainer>
        {people.map((p) => (
          <Link key={p.id} to={`/detail/${p.id}`}>. //an error occurs here

          </Link>
        ))}
      </PersonContainer>
    </MainContainer>
  );
}

警告如下。

類型“Number”不可分配給類型“Key | null | 不明確的'。 類型“數字”不可分配給類型“數字”。 “number”是原語，但“Number”是包裝器 object。盡可能使用“number”。ts(2322) index.d.ts(138, 9)：預期類型來自屬性“key”，它是在此處聲明類型為“IntrinsicAttributes & LinkProps & RefAttributes”

Answer 1

使用數字而不是數字。 大寫 N 的“數字”不是您要查找的數據類型。 它甚至在錯誤消息中這樣說。

我知道錯誤消息有時看起來會讓人不知所措，尤其是當您剛開始成為一名程序員時。 但大多數時候，他們很棒。

您應該嘗試養成仔細閱讀收到的錯誤消息的習慣，而不是僅僅被它嚇到。