Hola, tengo una pregunta/error de useEffect en mi código. Me gustaría tener un campo de entrada personalizado para cargar una imagen. Así que uso useRef y lo paso al componente ProfileImageOption. Después del componente de carga, la URL de obtención de la imagen (avatarUrlPut) se actualiza y useEffect debe llamar a la función getPhoto() y volver a procesar el componente. Pero no está pasando.
He encontrado esta publicación de blog relacionada con mi problema. Pero la publicación de blog no proporciona una idea de solución para el error. https://coder.earth/post/react-hooks-oops-part-3-an-effect-does-not-run-again-when-its-dependencies-change
He leído en la documentación oficial que cuando se usa useRef, useEffect no podrá volver a renderizar el componente porque useRef no notifica a React cuando cambia la propiedad actual. Sospecho que hay un problema similar aquí, pero no lo entendí completamente. ¿Alguien ayudaría? Gracias.
function EmployeeHeader(props) { const {avatarUrlPut, avatarUrlPost} = props const dispatch = useDispatch() const userID = useSelector((state) => state.auth.fetchUserSuccess.id) useEffect(() => { // After uploading the image avatarUrlPut is changed and it is on the dependency array of useEffect dispatch(getPhoto(avatarUrlPut)) console.log("Am I called after an upload?") // No! }, [dispatch, avatarUrlPut]) const [uploadedImage, setUploadedImage] = useState({}) const uploadImage = useRef() const openCameraModal = useRef() return ( <div> <ColorizedRect width={'100%'} height={'175px'}> <Image source={avatarUrlPut} className={'profile_image'} spinnerwidth={'140px'} spinnerheight={'175px'} /> <ProfileImageOption onClick={() => uploadImage.current.click()} icon={'upload'} top={'80px'} ></ProfileImageOption> <input id="uploadAvatar" ref={uploadImage} type="file" accept=".jpg,.jpeg,.png," style={{display: 'none'}} onChange={(e) => dispatch(uploadPhoto(e.target, avatarUrlPost, setUploadedImage, handleShow)) } /> <a href={avatarUrlPut} download="Avatar.jpg"> <ProfileImageOption icon={'download'} top={'125px'}></ProfileImageOption> </a> </ColorizedRect> </div> ) } export default EmployeeHeader