Tengo un componente MaterialTable y le agregué el atributo editable . Para los métodos onRowUpdate y onRowDelete , quiero obtener el índice del elemento actualizado o eliminado.
Este es el sandbox reproducible mínimo: https://codesandbox.io/s/busy-fast-z84qq?file=/src/App.tsx
Recibí el error cuando obtuve el índice del artículo. ¿Debo incluir la propiedad tableData en mi interfaz IPerson ? ¿Cómo puedo superar este problema?
¿Debo incluir la propiedad tableData en mi interfaz IPerson?
No, porque probablemente usará su interfaz IPerson en toda su aplicación, y agregar una propiedad tableData que puede existir o no (ver a continuación) anulará el propósito de la verificación de tipos. Typescript le dice que tableData no existe en su interfaz IPerson , lo cual es correcto. Sin embargo, el Javascript subyacente de su dependencia ha agregado su objeto con una propiedad tableData para sus propios fines internos (y externos si esta es la única forma de acceder al índice) y no se molestó en hacérselo saber a Typescript. Su código se ejecuta, el índice está disponible para su uso.
Probablemente haya mejores formas de hacer esto, pero podría crear una interfaz IPersonAfterRowUpdate que tenga el objeto 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); }), Tenga en cuenta que tenemos que comprobar que existe oldData de lo contrario, a TS no le gustaría que updatedData datos actualizados con un posible valor undefined .
¡Entonces envíe un PR a esta biblioteca con esta función escrita correctamente!