Obtengo datos como una 'matriz de matrices', así que tengo que cambiarlos a una 'matriz de objetos' para poder usarlos en la página de mis productos.

En la página principal de productos, la estoy transformando correctamente y usando console.log, puedo ver correctamente la 'matriz de objetos'. Después de pasar esta 'matriz de objetos' a la página de mi producto para poder usar los datos en la 'matriz de objetos', los objetos individuales se reorganizan y desordenan. He estado tratando de entender qué salió mal, pero no puedo depurarlo. Por favor ayuda.

Mi página de productos:

 import React, { useState } from "react"; import Product from "./Product"; function Products() { //State management for the data pulled using fetch // data comes in as an array of arrays // so I have to transform into an array of objects const [data, setData] = useState([]); // using the first array in the 'array of arrays' as keys const keys = data.shift(); // transforming from 'array of arrays' to 'array of objects' const dataObj = data.map(elem => ({ [keys[0]]: elem[0], [keys[1]]: elem[1], [keys[2]]: elem[2], [keys[3]]: elem[3], })); console.log(dataObj) // pulling data from excel sheet const getData = () => { fetch( "https://sheets.googleapis.com/v4/spreadsheets/1DpaMUmqYxGUKnT9BL0uBuCZ6WJ8vd1CLAklqUvkcA8M/values/Sheet1?alt=json&key=AIzaSyD6o4v215zWtw-kOqGVeuLG50pE2QeRZTg", { method: "GET", } ) .then((response) => response.json()) .then((data) => { // console.log(data.value); setData(data.values); }); }; return ( <div> Hello, you're in the products page <button onClick={getData}>click me</button> {dataObj.map((prod) => ( <Product prod={prod} key={prod.id}/> ))} </div> ); } export default Products;

pagina de mis productos

 import React from "react"; function Product(props) { console.log(props.prod); return ( <div> </div> ); } export default Product;

imagen del registro de mi consola

Ignore la matriz vacía por favor. La primera matriz es mi 'matriz de objetos' y está ordenada correctamente, pero las otras partes son los objetos individuales y están desordenadas.

Editar: datos.valor