Tengo este código dentro de un componente de clase React y cuando intento llamar a document.getElementById(photo._id) sigue devolviendo nulo, aunque cuando probé console.log(photo._id) en ambas líneas, la línea en el renderizado se imprime primero. en la consola, ¿entonces se supone que la identificación debe estar allí?
componentDidMount() { this.props.location.state.product.photos.map((photo) => { return axios .get(`${SERVER_HOST}/products/photo/${photo.filename}`) .then((res) => { if (res.data) { if (res.data.errorMessage) { console.log(res.data.errorMessage); } else { console.log(photo._id); console.log(document.getElementById(photo._id)); } } else { console.log("Record not found"); } }); }); } render() { return ( {this.props.location.state.product.photos.map((photo) => { { console.log(photo._id); } <img key={photo._id} id={photo._id} />; })} ) }No está devolviendo el elemento de imagen en la función de mapa. Por lo tanto, no está montado en el árbol dom y no puede acceder a él usando document.getElementById()
render() { return ( {this.props.location.state.product.photos.map((photo) => { { console.log(photo._id); } {/** return keyword is missing here **/} return <img key={photo._id} id={photo._id} />; })} ) }Reemplace el cuerpo de su función de procesamiento con el siguiente código.
return this.props?.location?.state?.product?.photos?.map((photo) => <img key={photo._id} id={photo._id} src={...} />;