javascript - 如何处理 props 和 states 以避免无限循环？

Question

我有一个从他的 parent 那里获取 Prop 的组件，我正在检查 componentDidUpdate() 中的 this.props.addMarker 是否为 true，如果为 true，则会触发一个包含 setState 的函数。

你可以想象接下来会发生什么:setState 触发 componentDidUpdate() 函数，该函数检查 this.props.addMarker 是否为 true...等等...

我应该怎样做才能避免此类问题？

这是我的代码:

componentDidUpdate() {  
    if(this.props.addMarker) {
      const place = this.props.coordinatesToCenter;
      const coord = place.coordinates;

      this.addMarkerProcess(place.place_name, place.place_type, coord.lon, coord.lat);
    }
}

addMarkerProcess(name, maki, xCoordinate, yCoordinate) {
    const data = {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [xCoordinate, yCoordinate]
      },
      properties: {
        // place:
        // login:
        lat: yCoordinate,
        lon: xCoordinate,
        color: "#00FFFF"
      }
    };

    if(this.state.clickIsEmpty) {
      data.properties.place = this.state.userNewPlaceInput;
      data.properties.login = this.state.userNewTypeInput;
    } else {
      data.properties.place = name;
      data.properties.login = maki;
    }

    const prevGeoJson = _.cloneDeep(this.state.geoJson);
    console.log("prevGeojson1", prevGeoJson)
    // map only rerenders geoJSONLayer if geoJSONLayer.data is a new instance:
    const geoJson = Object.assign({}, this.state.geoJson);
    geoJson.features.push(data);

    this.setState(prevState => ({
      prevGeoJson: prevGeoJson,
      geoJson: geoJson,
      currentMarker: data
    }));

    let canvas = document.querySelector('.mapboxgl-canvas');
    if(canvas.classList.contains("cursor-pointer")) {
      canvas.classList.remove("cursor-pointer");
    }
  }

Answer 1

componentDidUpdate() 会在更新后立即调用，因此，如果您在不使用条件包装的情况下调用 setState()，将不可避免地导致出现无限循环。 您可以根据新的和以前的 props 之间的比较来调用 setState()。

componentDidUpdate(prevProps) {
    if(this.props.data !== prevProps.data) 
        this.fetchNewData(this.props.data);
}