Pourquoi utiliser des noms de variables comme clés dans les propriétés des objets au lieu de valeurs de variables ?
P粉129168206
P粉129168206 2023-08-15 14:11:32
0
1
476
<p>J'essaie d'utiliser un objet <code>Record<TableId, TableState></code> où <code>type TableId = string;</code>. Cependant, lorsque j'imprime le contenu de l'objet d'enregistrement après avoir défini les paires clé/valeur via <code>setTableStateMap(map)</code>... ce que j'obtiens est l'objet <code>{id: {… }} </code> au lieu de la valeur que j'ai passée à la variable 'id'. </p> <pre class="brush:php;toolbar:false;">// App.tsx---------------------------- -- ---------- React.useEffect(() => { setCallback((id : TableId, tableState : TableState) => { const map : Record<TableId, TableState> setTableStateMap(carte); }); // Composant de table---------------------------------- tapez TableId = chaîne ; tapez Callback = (id : TableId, state : TableState) => let rappel : rappel ; fonction d'exportation setCallback(callbackInput: Callback) { rappel = callbackInput ; } laissez stateMap : Record<TableId, TableState> fonction d'exportation setTableStateMap(carte : Record<TableId, TableState>) { stateMap = carte ; } interface TableProps { identifiant ? : TableId ; } exporter la table const : React.FC<TableProps> IDENTIFIANT, }) => laissez tableState : TableState | si (identifiant) { tableState = stateMap[id]; // La clé de stateMap est définie sur 'id', pas sur la valeur de la variable id // {identifiant: {…}} } autre { tableState = non défini ; } };</pré> <p><br /></p>
P粉129168206
P粉129168206

répondre à tous(1)
P粉714890053

Lorsque vous créez un objet en utilisant des accolades comme { id: tableState }, la chaîne "id" est interprétée comme une clé statique au lieu de la valeur dynamique de la variable id. Vous devez utiliser des noms de propriétés calculés en JavaScript/TypeScript. Les noms de propriétés calculés vous permettent d'utiliser des valeurs dynamiques comme clés lors de la création d'objets.

// 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
};
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal