为何在对象属性中使用变量名作为键，而不是变量值？
P粉129168206
2023-08-15 14:11:32
<p>我正在尝试使用一个<code>Record<TableId, TableState></code>对象，其中<code>type TableId = string;</code>。然而，当我在通过<code>setTableStateMap(map)</code>设置键/值对之后打印记录对象的内容时...我得到的是对象<code>{id: {…}}</code>，而不是我传递给'id'变量的值。</p>
<pre class="brush:php;toolbar:false;">// 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;
}
};</pre>
<p><br /></p>
当你使用带有类似 { 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 };