在 ReactJS API 中使用 setState 时出错

Question

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;

Answer 1

The error message you posted is exactly correct. You've created an infinite loop in your component. You render your component, which calls add_svg , which calls convert_path , which updates state, which triggers a rerender, which calls add_svg , etc. If you coment out the call to this.convert_path in add_svg , your infinite loop problem will vanish.