Tengo una aplicación que obtiene datos de una conexión websocket que es realmente rápida y está causando errores con los datos en el estado. Estoy. pasando una matriz de solo 15 elementos a un componente secundario, sin embargo, es una matriz de tuplas. Cuando lo mapeo, necesito deconstruir cada tupla para representar cada elemento. Sin embargo, cada 30 segundos aproximadamente, el componente recibe datos que están dañados y provocan el error:

TypeError: no se pueden leer las propiedades de undefined (leyendo '0')

En el elemento de línea [0] porque el elemento no está definido. He probado varios tipos de lógica para hacer que esta asignación sea condicional en función del contenido de la propiedad. A continuación se muestra Array.isArray (topAsks [0]), también probé topAsks.length> 2. Sin embargo, todavía está pasando e intentando mapear la matriz indefinida.

¿Hay una mejor manera de hacer esto? ¿Eso es poder verificar que no esté indefinido antes de mapear?

También comenté anteriormente que estaba pensando en hacer esto con un bucle for y luego mapear cada matriz individual (sin pasar por la necesidad de acceder a una matriz interna), parece extraño, pero tal vez esa sea una forma efectiva de hacerlo.

 import React from 'react'; function Orderbook({topAsks, topBids}) { // let askQuant = []; // let askPrice = []; // let rBids = []; // for(let i = 0; i <= 15; i++) { // for(let j = 0; j < 1; j++) { // rAsks.push(topAsks[i][j]) // } // } // console.log(topAsks) return ( <div className="ob-cont"> <div className="ob-title-cont"> <div className="ob-title-marketsize"></div> <div className="ob-title-price"></div> </div> <div className="ob-sell-cont"> {Array.isArray(topAsks[0]) ? topAsks.map((item, index) => ( <div key={index} className="ob-sell-tile"> <div className="ob-sell-tile">{item[0]} </div> <div className="ob-sell-tile">{item[1]} </div> </div> )) : <div className="ob-sell-tile"> </div> } </div> </div> ); } export default Orderbook;