Warum Variablennamen als Schlüssel in Objekteigenschaften anstelle von Variablenwerten verwenden?
P粉129168206
P粉129168206 2023-08-15 14:11:32
0
1
480
<p>Ich versuche, ein <code>Record<TableId, TableState></code>-Objekt zu verwenden, wobei <code>type TableId = string;</code> ist. Wenn ich jedoch den Inhalt des Datensatzobjekts ausdrucke, nachdem ich die Schlüssel/Wert-Paare über <code>setTableStateMap(map)</code> festgelegt habe, erhalte ich das Objekt <code>{id: {… }} </code> anstelle des Werts, den ich an die Variable „id“ übergeben habe. </p> <pre class="brush:php;toolbar:false;">// App.tsx---------------------------- -- ---------- React.useEffect(() => { setCallback((id: TableId, tableState: TableState) => { const map: Record<TableId, TableState> setTableStateMap(map); }); // Tabellenkomponente------------------------------------------------ Typ TableId = string; type Callback = (id: TableId, state: TableState) => let callback: Rückruf; Exportfunktion setCallback(callbackInput: Callback) { callback = callbackInput; } let stateMap: Record<TableId, TableState> Exportfunktion setTableStateMap(map: Record<TableId, TableState>) { stateMap = Karte; } Schnittstelle TableProps { id?: TableId; } const-Tabelle exportieren: React.FC<TableProps> AUSWEIS, }) => let tableState: TableState |. if (id) { tableState = stateMap[id]; // Der Schlüssel von stateMap wird auf „id“ gesetzt, nicht auf den Wert der Variablen-id // {Ausweis: {…}} } anders { tableState = undefiniert; } };</pre> <p><br /></p>
P粉129168206
P粉129168206

Antworte allen(1)
P粉714890053

当你使用带有类似 { 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
};
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage