在react native状态下更新嵌套对象而不需要操作整个对象。

Question

我正在做一个react native项目

这是我在react类组件构造器中初始化的状态变量。

this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
      markers: [],
      geoJson: null,
      geoJsonLoading: true,
      usertoken: "",
      featureChanges: null,
      socketConnectionError: "",
    };

在geoJson状态变量中，我以以下格式存储数据。

{
  type: 'FeatureCollection',
  features: [
    {
      userid: 'c5d84a8a-e7ec-465a-b01c-d7a9e702aed2',
      type: 'Feature',
      properties: {},
      geometry: [Object]
    },
    {
      userid: '7ccb05de-6e71-4862-b1f5-a61b134d99ef',
      type: 'Feature',
      properties: {},
      geometry: [Object]
    },
    ...
  ]
}

这是我们从服务器接收到的任何更新或新建的对象的形状。

{
      userid: '7ccb05de-6e71-4862-b1f5-a61b134d99ef',
      type: 'Feature',
      properties: {},
      geometry: [Object]
    }

现在，当我们从服务器上接收到任何新的或更新的特征对象时，我想在状态中立即更新该特征，并重新渲染组件以在MapView上显示更新的特征。

我不想一次又一次的创建整个geoJson，因为它存储了很多特征，而且重复计算整个数据集是很昂贵的。

我尝试了很多东西，但没有任何效果。请帮助我。

Answer 1

尝试更新 geoJson 当你从服务器流接收到一个新的对象时，如下图所示。

this.setState({geoJson:{...this.state.geoJson, features:[...this.state.geoJson.features,newObjectFromServer]})