為何在物件屬性中使用變數名稱作為鍵，而不是變數值？

Question

我正在嘗試使用一個Record對象，其中type TableId = string;。然而，當我在透過setTableStateMap(map)設定鍵/值對之後列印記錄物件的內容時...我得到的是物件{id: {…}} ，而不是我傳遞給'id'變數的值。

// App.tsx---------------------------- -----------
React.useEffect(() => {
    setCallback((id: TableId, tableState: TableState) => {
        const map: Record<TableId, TableState> = { id: tableState };
        setTableStateMap(map);
    });
    

// Table Component-------------------------------
type TableId = string;
type Callback = (id: TableId, state: TableState) => void;
let callback: Callback;
export function setCallback(callbackInput: Callback) {
    callback = callbackInput;
}

let stateMap: Record<TableId, TableState> = {};
export function setTableStateMap(map: Record<TableId, TableState>) {
    stateMap = map;
}

interface TableProps {
    id?: TableId;
}

export const Table: React.FC<TableProps> = ({
    id,
}) => {

    let tableState: TableState | undefined;
    if (id) {
        tableState = stateMap[id];
        // stateMap的鍵設定為'id'，而不是變數id的值
        // {id: {…}}
    } else {
        tableState = undefined;
    }
};

Answer 1

當你使用類似 { id: tableState } 的大括號來建立物件時，字串 "id" 被解釋為靜態鍵，而不是 id 變數的動態值。你需要在 JavaScript/TypeScript 中使用計算屬性名稱。計算屬性名稱允許你在建立物件時使用動態值作為鍵。

// App.tsx---------------------------------------
React.useEffect(() => {
    setCallback((id: TableId, tableState: TableState) => {
        const map: Record<TableId, TableState> = { [id]: tableState }; // 在这里使用计算属性名
        setTableStateMap(map);
    });

// Table Component-------------------------------
// ... your other imports and code

export const Table: React.FC<TableProps> = ({
    id,
}) => {
    let tableState: TableState | undefined;
    if (id) {
        tableState = stateMap[id]; // 现在这将正确地使用动态 id 访问值
    } else {
        tableState = undefined;
    }
// ... rest of your component code
};