Estoy tratando de hacer funcionar la biblioteca react-easy-crop siguiendo el tutorial de este tipo: https://www.youtube.com/watch?v=RmiP1AY5HFM
Sin embargo, alrededor de la mitad de su video, puede mostrar su imagen después de seleccionar el archivo. En mi código, puedo ver la imagen durante 0,5 segundos y desaparece porque React se bloquea con el registro: "Error no detectado: se excedió la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita el número de actualizaciones anidadas para evitar bucles infinitos".
Sé que hay un bucle infinito en alguna parte, pero no puedo entender dónde... Soy bastante nuevo en reaccionar... ¡ayuda por favor!
const inputRef = React.useRef(); const triggerFileSelectPopup = () => inputRef.current.click(); const [image, setImage] = useState(null); const [croppedArea, setCroppedArea] = useState(null); const [crop, setCrop] = useState({x:0, y:0}); const [zoom, setZoom] = useState(1) const onCropComplete = () => {} const onSelectFile = (event) => { if (event.target.files && event.target.files.length > 0) { const reader = new FileReader() reader.readAsDataURL(event.target.files[0]) reader.addEventListener('load', ()=> { console.log(reader.result); setImage(reader.result); }); } }; const CropContainer = () => { return ( <div className='CropContainer'> <div className='container-cropper'> <Cropper image={image} crop={crop} zoom={zoom} aspect={1} onCropChange={setCrop} onZoomChange={setZoom} onCropComplete={onCropComplete} /> <Slider /> </div> <div className='container-buttons'> <input type='file' accept="image/jpg, image/jpeg, image/png" ref={inputRef} style={{display:'none'}} onChange={onSelectFile} /> <Button variant='contained' onClick={triggerFileSelectPopup}>Choose New Image </Button> <Button variant='contained'>Save </Button> </div> </div> ); } return ( <div className="NewDiv"> <CropContainer /> </div> );Parece probable que algo que hace el componente CropContainer anidado provoque que el componente externo se vuelva a procesar. Cuando el componente externo se vuelve a renderizar, declara un nuevo componente CropContainer , que desmonta la "instancia" anterior y monta una nueva. Esta es la razón por la que se considera antipatrón definir los componentes de React dentro de otros componentes de React.
Puede mover el JSX que devuelve CropContainer , como lo ha hecho
return ( <div className="NewDiv"> <div className="CropContainer"> <div className="container-cropper"> <Cropper image={image} crop={crop} zoom={zoom} aspect={1} onCropChange={setCrop} onZoomChange={setZoom} onCropComplete={onCropComplete} /> <Slider /> </div> <div className="container-buttons"> <input type="file" accept="image/jpg, image/jpeg, image/png" ref={inputRef} style={{ display: "none" }} onChange={onSelectFile} /> <Button variant="contained" onClick={triggerFileSelectPopup}> Choose New Image </Button> <Button variant="contained">Save</Button> </div> </div> </div> ); o puede mover la declaración de CropContainer fuera del componente externo. Pase todas las devoluciones de llamada y demás como accesorios.
const CropContainer = ({ crop, image, inputRef, onCropChange, onCropComplete, onSelectFile, setCrop, setZoom, triggerFileSelectPopup, zoom }) => { return ( <div className="CropContainer"> <div className="container-cropper"> <Cropper image={image} crop={crop} zoom={zoom} aspect={1} onCropChange={setCrop} onZoomChange={setZoom} onCropComplete={onCropComplete} /> <Slider /> </div> <div className="container-buttons"> <input type="file" accept="image/jpg, image/jpeg, image/png" ref={inputRef} style={{ display: "none" }} onChange={onSelectFile} /> <Button variant="contained" onClick={triggerFileSelectPopup}> Choose New Image </Button> <Button variant="contained">Save</Button> </div> </div> ); };...
return ( <div className="NewDiv"> <CropContainer /* pass all those props here */ /> </div> );yo mismo tuve este problema, cuando abría el modal para recortar la imagen, obtenía una consola infinita. imagen en Cropper
const IMG = useSelector((state: RootStateOrAny) => state.create.photoRaw) const [image, setImage] = useState(URL.createObjectURL(IMG)) const [crop, setCrop] = useState<Point>({ x: 0, y: 0 }); const [zoom, setZoom] = useState(1); const onCropComplete = useCallback( (croppedArea: Area, croppedAreaPixels: Area) => { console.log(croppedArea, croppedAreaPixels); }, []); <Cropper image={image} crop={crop} zoom={zoom} aspect={1 / 1} onCropChange={setCrop} onCropComplete={onCropComplete} onZoomChange={setZoom} />