Mengapa menggunakan nama pembolehubah sebagai kunci dalam sifat objek dan bukannya nilai pembolehubah?
P粉129168206
P粉129168206 2023-08-15 14:11:32
0
1
477
<p>Saya cuba menggunakan objek <kod>Rekod<TableId, TableState</code> Walau bagaimanapun, apabila saya mencetak kandungan objek rekod selepas menetapkan pasangan kunci/nilai melalui <code>setTableStateMap(map)</code>... apa yang saya dapat ialah objek <code>{id: {… }} </code> bukannya nilai yang saya hantar kepada pembolehubah 'id'. </p> <pre class="brush:php;toolbar:false;">// 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; } };</pre> <p><br /></p>
P粉129168206
P粉129168206

membalas semua(1)
P粉714890053

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
};
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan