0
173
VistasEl contenido de la matriz no se puede recuperar (React JS)
Obtengo el contenido de una matriz y puedo ver el contenido de la matriz en console.log.
Sin embargo, la longitud es 0 y el contenido no se puede recuperar con un mapa. ¿Por qué es esto?
const contents = [] as any[] useEffect(() => { for(const key of Object.keys(fruits)) { contents[key as any] = { ...fruits[key as any], ...vegetables[key as any], } } }, [fruits, vegetables, contents]) console.log('contents', contents) console.log('contents length', contents.length)2 Respuestas
Responde la pregunta0
Puede intentar tener contents en el estado en lugar de exponerlo como una variable.
los contents se actualizarán en consecuencia y correctamente cada vez que se actualicen las fruits o vegetables .
const [contents, setContents] = useState([]) useEffect(() => { const updatedContents = [...contents] for(const key of Object.keys(fruits)) { updatedContents[key as any] = { ...fruits[key as any], ...vegetables[key as any], } } setState(updatedContents) }, [fruits, vegetables]) console.log('contents', contents) console.log('contents length', contents.length)0
useEffect ejecuta después de cada procesamiento.
Así que el orden de las operaciones en tu ejemplo es:
- useEffect programado para ejecutarse después de renderizar
- El resto del código se ejecuta (incluidos sus console.logs, por lo que ve 0 en console.log)
- useEffect se ejecuta, actualizando los contenidos con los datos.
En las herramientas de desarrollo de Chrome, las matrices/objetos de javascript se muestran por su referencia, evaluados de forma perezosa . Lo que esto significa es que si se agrega algo a la matriz/objeto más tarde, y si lo expande más tarde que cuando se imprimió, verá los nuevos datos.
Eso responde al por qué.
Como solución, esto es lo que puede hacer en su lugar:
const [contents, setContents] = useState([]); useEffect(() => { const newContents = []; for(const key of Object.keys(fruits)) { newContents.push({ ...fruits[key as any], ...vegetables[key as any], }); setContents(newContents); } }, [fruits, vegetables, contents]) console.log('contents length', contents.length);Verá el registro de la consola correspondiente una vez que se actualice el estado.