I'm using an API called 'react-svg', it allows me to inject SVG file into the DOM and also have a copy of the SVG element so I can use it later.
This API has a functionality called 'afterInjection', it's basically a function called after injecting the SVG file, inside that function I tried to update the component state and I got an error :
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
import { ReactSVG } from 'react-svg';
import Sketch from '../sketch/Sketch';
import './ImageUploader.scss';
import Complex from 'complex.js';
class ImageUploader extends Component {
constructor( props ) {
super( props );
this.state = {
pointsArray : [],
fileURL : null,
file: null
}
this.handleChange = this.handleChange.bind(this);
}
handleChange = (event) => {
this.setState({
file : event.target.files[0],
fileURL: URL.createObjectURL(event.target.files[0])
})
}
add_svg = () => {
if (this.state.fileURL !== null) {
return (
<ReactSVG
src={this.state.file.name}
afterInjection={(error, svg) => {
if (error) {
console.error(error)
return
}
this.convert_path( svg.children[0].children[0] );
}}
/>
);
}
return null;
}
convert_path = path => {
let points = [];
const length = path.getTotalLength();
const step = length / 100;
for (let i = length - 1; i >= 0; i -= step) {
// console.log(path.getPointAtLength(i));
points.push( new Complex( path.getPointAtLength(i).x, path.getPointAtLength(i).y) );
}
this.setState({ pointsArray : points });
}
render() {
return (
<div >
<div className="upload_sketch_container">
<div className="input_container">
<input type="file" id="file" onChange={this.handleChange} />
<label htmlFor="file">Upload SVG file</label>
</div>
<div className="image_sketch_container">
<div className="image_container" >
{this.add_svg()}
</div>
<div className="sketch_container">
<Sketch data={this.state.pointsArray} />
</div>
</div>
</div>
</div>
);
}
}
export default ImageUploader;
Please login or Register to submit your answer