更新 React 状态时，渲染内部的自调用函数出错答案

【问题标题】：Error in self-invoking function inside render when updating React state更新 React 状态时，渲染内部的自调用函数出错
【发布时间】：2018-08-22 13:16:42
【问题描述】：

我正在使用react-native-maps 编写一个 React Native 应用程序。在我的地图上，我通过在自调用函数中使用 map 方法动态填充了许多 circles。请参阅位于组件的渲染函数中的以下代码：

{
  (() => {
    return this.state.mapviewPolygon.map(circle => (
      <MapView.Circle
        center={circle.coordinates}
        key={circle.key}
      />
    ))
  })()
}

这在初始渲染时效果很好。我稍后会根据用户在地图上的点击位置更新this.state.mapviewPolygon，目的是让圆圈根据新的坐标集重新渲染。

但是，当这个自调用函数触发时，我收到错误TypeError: undefined is not a function (near '..._this2.state.mapviewPolygon.map...')，这并没有告诉我太多。同样，堆栈跟踪的帮助也可以忽略不计。

发生了什么？如何让圆圈正确重新渲染？

编辑 1：在下面查看我的整个渲染功能：

render() {

    return (
      <View style={styles.container}>

        <MapView
          style={styles.map}
          showUserLocation
          followUserLocation
          loadingEnabled
          region={this.getMapRegion()}
          scrollEnabled = {this.state.mapviewScroll}
          onPress= { (e) => {
                let stateCopy = Object.assign({}, this.state.mapviewPolygon);
                // circleKey is a variable containing the index of 
                // the item in the state array to change
                stateCopy[circleKey].coordinates = e.nativeEvent.coordinate;
                this.setState({mapviewPolygon: stateCopy});
              }
            }
        >

         {
            this.state.mapviewPolygon.map(circle => 
                  <MapView.Circle
                    center={circle.coordinates}
                    key={circle.key}
                    radius={50}
                    fillColor={'#4286f4'}
                  />
                )
          }

          <MapView.Polygon
            coordinates={this.getPolygonCoords()}
            fillColor="rgba(0, 200, 0, 0.5)"
            strokeColor="rgba(0,0,0,0.5)"
            strokeWidth={2}
          />
        </MapView>

      </View>
    );
  }

【问题讨论】：

试试在你的渲染函数中使用{ this.state.mapviewPolygon.map(circle => <MapView .../> ) }。
同样的事情发生了。
你能发布你的整个render函数吗？
完成。（请注意，我在之前的评论中继续实施了您的建议，因为它更简洁，并导致我迄今为止的表现相同。）
尝试记录并查看渲染函数中this.state.mapviewPolygon 的值。 map 函数是数组的一个属性。如果你的 this.state.mapviewPolygon 是 undefined 或 null 那么这个错误就会出现。只要确保该值是一个数组

标签： javascript react-native react-native-maps

【解决方案1】：

当你这样做时，你正在将 mapviewPolygon 从可能是一个数组的东西更改为一个对象：

let stateCopy = Object.assign({}, this.state.mapviewPolygon);

map 不是对象的方法；因此错误。如果要复制数组，请使用以下内容：

let stateCopy = [...this.state.mapviewPolygon];

或者

let stateCopy = this.state.mapviewPolygon.slice();

【讨论】：

我会继续把这个给你，因为它是正确的。我也会留下我自己的答案供其他人参考。

【解决方案2】：

答案原来是stateCopy 是不正确的类型。因为this.state.mapviewPolygon 是一个对象数组，所以使用Object.assign 是一个错误。所以我替换了这个：

let stateCopy = Object.assign({}, this.state.mapviewPolygon);

有了这个：

let stateCopy = [];
  for (let i in this.state.mapviewPolygon) {
    stateCopy.push(this.state.mapviewPolygon[i]);
};

这是有效的，因为map 现在接收的是数组而不是对象。

【讨论】：