Mengapa menggunakan nama pembolehubah sebagai kunci dalam sifat objek dan bukannya nilai pembolehubah?

Question

Saya cuba menggunakan objek Rekod Walau bagaimanapun, apabila saya mencetak kandungan objek rekod selepas menetapkan pasangan kunci/nilai melalui setTableStateMap(map)... apa yang saya dapat ialah objek {id: {… }} bukannya nilai yang saya hantar kepada pembolehubah 'id'.

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

// Komponen Jadual---------------------------------
taip TableId = rentetan;
taip Panggilan Balik = (id: TableId, nyatakan: TableState) =>
biarkan panggil balik: Panggilan balik;
fungsi eksport setCallback(callbackInput: Callback) {
    panggil balik = panggil balikInput;
}

biarkan stateMap: Record<TableId, TableState>
fungsi eksport setTableStateMap(peta: Record<TableId, TableState>) {
    stateMap = peta;
}

antara muka TableProps {
    id?: TableId;
}

eksport const Jadual: React.FC<TableProps>
    ID,
}) =>

    biarkan tableState: TableState |.
    jika (id) {
        tableState = stateMap[id];
        // Kunci stateMap ditetapkan kepada 'id', bukan nilai id pembolehubah
        // {ID: {…}}
    } lain {
        tableState = tidak ditentukan;
    }
};

Answer 1

Apabila anda mencipta objek menggunakan pendakap kerinting seperti { id: tableState }, rentetan "id" ditafsirkan sebagai kunci statik dan bukannya nilai dinamik pembolehubah id. Anda perlu menggunakan nama harta yang dikira dalam JavaScript/TypeScript. Nama sifat yang dikira membolehkan anda menggunakan nilai dinamik sebagai kunci semasa membuat objek.

// 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
};