Question

现在不推荐使用componentWillReceiveProps，您将如何使用新的getDerivedStateFromProps工作流程更新传单地图。

这就是我现在所做的：

我在componentDidMount加载地图并绘制元素
如果有道具更新，我会清除图层并重新绘制componentDidUpdate中的元素。

这是一些示例代码：

componentDidMount(){
  // load leaflet map and draw components
  var map = this.map = L.map('leafletmap');
  this.map.addData(geojsonData);
} 

componentDidUpdate(prevProps,prevState) {
  // clear layers and redraw data
  if (prevProps.data !== this.props.data) {
      this.map.clearLayers();
      this.map.addData(geojsonData);
   }
 }

我必须这样做，因为componentDidMount只被调用一次而componentDidUpdate仅在道具更新后被调用。我想我可以在我的工作流程中使用componentDidUpdate或componentWillReceiveProps。既然componentWillReceiveProps已被弃用，并且考虑到getDerivedStateFromProps总是被调用，我想知道我是否可以在此步骤中绘制所有传单内容，如果这足以在更改道具的地方更新地图

static getDerivedStateFromProps(nextProps) {
  // draw stuff on map every time props change 
  // (layers should be cleared as well)
  if (prevProps.data !== this.props.data) {
      this.map.clearLayers();
      this.map.addData(geojsonData);
   }
 } 

componentDidMount(){
  // load leaflet map
  var map = this.map = L.map('leafletmap');
}

我遇到的问题是我无法访问this中的getDerivedStateFromProps 相关：How do I force leaflet to update the map?

Answer 1

getDerivedStateFromProps功能可以细分为

componentWillReceiveProps

在你的情况下，你会写

static getDerivedStateFromProps(nextProps, prevState) {
   //returning the updated state if you want 
}

componentDidUpdate(prevProps, prevState) {
   //perform side-effects based on props or state change
}

Answer 2

我想我可以在我的工作流程中使用componentDidUpdate或componentWillReceiveProps。

正如Wazner的评论上面提到的那样，这是不对的。副作用（您正在描述的内容）在componentWillReceiveProps或getDerivedStateFromProps中并不安全。 StrictMode docs page has a section that goes into more detail on why this is。

对于您正在描述的案例，我不清楚为什么您可以继续使用componentDidMount和componentDidUpdate作为示例代码。（因为您之前没有使用过componentWillReceiveProps - 为什么现在要更改？）

如何使用React 16.3中的`getDerivedStateFromProps`更新传单地图？

2 个答案: