我有一個 MaterialTable 組件，我editable向它添加了屬性。對于onRowUpdate和onRowDelete方法，我想獲取更新或洗掉專案的索引。
這是最小的可重現沙箱：https : //codesandbox.io/s/busy-fast-z84qq? file =/ src/ App.tsx
獲取專案的索引時出現錯誤。我應該將tableData屬性包含在我的IPerson界面中嗎？我怎樣才能克服這個問題？
uj5u.com熱心網友回復：
我應該將 tableData 屬性包含到我的 IPerson 界面中嗎？
不，因為您可能會IPerson在整個應用程式中使用您的界面，并且添加一個tableData可能存在或可能不存在的屬性（見下文）將違背型別檢查的目的。打字稿告訴你，tableData你的IPerson界面上不存在，這是正確的。但是，您的依賴項中的底層 Javascript 已經為您的物件附加了一個tableData用于其內部目的的屬性（如果這是獲取索引的唯一方法，則是外部目的）并且沒有費心讓 Typescript 知道。您的代碼運行，索引可供使用。
可能有更好的方法來做到這一點，但您可以創建一個IPersonAfterRowUpdate包含 tableData 物件的介面：
interface IPersonAfterRowUpdate extends IPerson {
tableData: { id: number };
}
/* ... */
onRowUpdate: (newData, oldData) =>
new Promise<void>((resolve, _reject) => {
setTimeout(() => {
if (oldData) {
const updatedData = [...data];
const index = (oldData as IPersonAfterRowUpdate).tableData.id;
updatedData[index] = newData;
setData(updatedData);
resolve();
}
_reject(new Error('Could not find oldData'));
}, 1000);
}),
請注意，我們必須檢查是否oldData存在，否則 TS 不希望我們updatedData使用可能的undefined值進行索引。
然后向這個庫提交一個 PR 并正確輸入這個函式！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/398187.html
標籤：javascript 反应 打字稿 反应打字稿 材料表
上一篇：瀏覽器渲染一個空頁面
下一篇：計算噪聲影像中的物件