Estoy creando una matriz de objetos en reacción que contienen un nombre y un color (el color es para el color del puntero en Google Maps). Estos objetos se ven así { name: "Ben", colour: "green" } .
El problema al que me enfrento es cuando ejecuto este código. Por ejemplo, en mi archivo javascript, tengo este fragmento de código:
data.forEach((element) => { if (!names.has(element.person)) { names.add(element.person) keys.push({ name:element.person, colour:element.personColour }) } }) Esto recorre mis datos, que en este caso son fotos, y extrae el nombre y el color correspondiente para esa persona. También hay controles para garantizar que la persona no sea un duplicado. En la parte superior del archivo, defino keys y names , keys como una matriz y names como un conjunto.
Si escribo una instrucción console.log() en la parte inferior de este código para imprimir claves, los datos se muestran en la consola.
Sin embargo, cuando voy a mi declaración de devolución de reacción para devolver mi JSX, y {console.log(keys)} , me devuelve esto:
[] --> 0: {name: 'Ben', colour: 'yellow'} 1: {name: 'George', colour: 'pink'} 2: {name: 'Jerry', colour: 'green'} 3: {name: 'Jesus', colour: 'orange'} 4: {name: 'Max', colour: 'purple'} 5: {name: 'Tom', colour: 'blue'} length: 6 [[Prototype]]: Array(0)Como puede ver, se me muestra una matriz vacía, pero con datos dentro, no puedo acceder a ella. Intenté convertirlo en una promesa y luego resolverlo, pero me devolvieron una matriz en blanco.
Soy bastante nuevo en JS y React, por lo que cualquier ayuda sería muy apreciada :)
podría ser que los datos no terminaron de descargarse, obtienes los datos en un efecto de uso y luego haces lo que quieras con ellos
const [data, setData] = useState([]) useEffect(() => { setData(your fetched data method here) }, []) //[] <-on page render function x() { data.forEach((element) => { if (!names.has(element.person)) { names.add(element.person) keys.push({ name:element.person, colour:element.personColour }) } }) }