Question

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

{
  (() => {
    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>
    );
  }

Answer 1

执行此操作时，您正在将mapviewPolygon从可能是数组的对象更改为对象：

EXCLUSIVE

地图不是对象的方法；因此错误。如果要复制数组，请使用以下命令：

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

或

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

Answer 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现在正在接收数组而不是对象。

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

2 个答案: