Necesito enviar elementos a mi matriz, pero cuando console.log . registro esta matriz, dice 'indefinido' para el valor específico. Por cierto, estoy tratando de obtener datos del almacenamiento de Firebase. ¿Cómo agrego correctamente elementos a una matriz?
Aquí está mi código:
const [imagelinks, setImagelinks] = React.useState(['']); const myFunction = () =>{ await storage() .ref(`${_userid}`) .list() .then(result => { result.items.forEach(async ref => { await storage() .ref(ref.fullPath) .getDownloadURL() .then(url => { //get url setImagelinks([...imagelinks, url]); console.log('Links: ' + url); }); }); //there it says undefined when logging... console.log(imagelinks[0]) }); }Editar: ¿puedo usar lo siguiente?
const imagelinks = []; //instead of const [imagelinks, setImagelinks] = useState([]);Actualizar state es una tarea asíncrona. Se requiere una nueva representación del componente para tener el valor actualizado. Para estar seguro, agregue su consola fuera de myFunction , debajo de la definición de estado, por ejemplo:
const [imagelinks, setImagelinks] = React.useState(['']); console.log(imagelinks) Si desea usar el resultado para hacer algo de lógica (una llamada a la API, por ejemplo), puede usar el useEffect , como este, por ejemplo:
useEffect(()=>{ if(imagelinks.length>0){ // do your things, except do not call setImagelinks in here to avoid having a loop because imagelinks is in the dependencies array of useEffect. } },[imagelinks])Como se mencionó en la respuesta anterior, no puede acceder al nuevo estado en el mismo ámbito después de configurarlo, ya que aún tendrá el valor anterior para ese ámbito específico.
Si realmente necesita almacenar y acceder a algún valor en el mismo ámbito, puede usar useRef hook o puede almacenar el valor en una variable en ese ámbito.
Aquí hay un ejemplo, pero tenga en cuenta que cambiar el valor de referencia no activará una nueva representación, por lo que no reemplazará su useState.
ejemplo variable:
let imageLinksArray=[...imagelinks, url] //add this in your function console.log(imageLinksArray) //you can pass this to the next functionejemplo de referencia de uso:
const imagelinksRef = useRef() //add this on top after your useState ... imageLinksRef.current=[...imagelinks, url] //add this in your function console.log(imageLinksRef.current) //this will give you the result you're expectingtambién puede consultar este paquete npm que le permite acceder al nuevo estado a través de una referencia directamente después de configurarlo (si realmente lo necesita) https://www.npmjs.com/package/react-usestateref