He estado jugando con las matrices y mapeándolas usando la función Array.prototype.map() y, sinceramente, he estado luchando MUCHO, así que espero que alguien pueda compartir algo de luz sobre esto.
Entonces, mi objetivo es simple mapear algunos encabezados y filas en una tabla en mi componente personalizado, pero cuando hago el mapeo, siempre dice "variable.map() is not a function" evento aunque estoy especificando que es una matriz y tiene valores que estoy pasando desde mi página. Ya probé si era porque estaba vacío pero no parece que sea así.
Mi página es simplemente esto por ahora.
import AppLayout from '../../../components/AppLayout'; import Table from '../../../components/modules/Table'; export default function Products() { return ( <AppLayout> <section className="content"> <h3 className="text-3xl font-bold">Products</h3> <Table headings={[ '', 'Product', 'Status', 'Type', ]} /> </section> </AppLayout> ); }En cuanto a mi mesa es:
export default function Table(headings = [], rows = {}) { const top = headings.map((value) => ( <th key={value} scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" > {value} </th> )); return ( <div className="flex flex-col"> <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"> <table className="min-w-full divide-y divide-gray-200"> <thead className="bg-gray-50"> {top} </thead> <tbody> {rows} </tbody> </table> </div> </div> </div> </div> ); }He tenido otros problemas con el mapeo de matrices, pero este es el más en el que siempre fallo, no sé por qué TAN MOLESTO.
Gracias por adelantado
Revisé tu mapeo y funciona bien. Creo que el problema está en la extracción de datos. Debe modificar su código de la siguiente manera:
export default function Table({headings = [], rows = {}}) {o
export default function Table(props) { {headings, rows} = props;Los accesorios de componentes siempre serán un objeto , por lo que debe desestructurar las propiedades de ese objeto:
Table({ headings = [], rows = [] }) También cambié las filas a una matriz porque, aunque no pasa ninguna propiedad de fila a ese componente en este momento, estoy bastante seguro de que también será una matriz que también deberá ser map .