求助：如何用immutability helper的update函数更新state？附替代方案

嘿，我来帮你搞定这个state更新的事儿！不管是用immutability-helper的update函数，还是不用它的原生JS写法，我都给你一步步讲清楚，还会注意到你可能忽略的细节哦～

一、用immutability-helper的update函数实现 #

首先得确保你已经装了这个库：

npm install immutability-helper
# 或者用yarn
yarn add immutability-helper

你的初始state里latlng的坐标是数字类型，但返回的jsonResponse里是字符串，所以第一步要先把这些字符串转成数字，同时给每个marker加唯一的key（避免React列表渲染出问题）。然后用update函数来做不可变更新：

替换整个Markers数组 #

如果想直接把原有的markers换成接口返回的新数据：

import update from 'immutability-helper';

// 先处理接口返回的数据：转坐标为数字，添加key
const processedMarkers = jsonResponse.map((item, index) => ({
  key: index + 1, // 要是后端有唯一ID就用ID，这里用索引+1凑个唯一值
  latlng: {
    latitude: parseFloat(item.latlng.latitude),
    longitude: parseFloat(item.latlng.longitude)
  }
}));

// 更新state
this.setState(prevState => 
  update(prevState, {
    markers: { $set: processedMarkers } // $set用来替换整个数组
  })
);

追加新Markers到原数组 #

如果不想替换，而是在原有基础上添加新的markers，就用$push：

this.setState(prevState => 
  update(prevState, {
    markers: { $push: processedMarkers } // 把处理好的新markers追加到原数组后面
  })
);

二、不用immutability-helper的原生JS实现 #

React要求更新state时必须保持不可变性，不能直接修改原state对象，所以我们可以用ES6的扩展运算符来创建新的数组/对象，一样能实现需求：

替换整个Markers数组 #

最直接的方式，创建新的state对象替换原markers：

// 同样先处理接口数据
const processedMarkers = jsonResponse.map((item, index) => ({
  key: index + 1,
  latlng: {
    latitude: parseFloat(item.latlng.latitude),
    longitude: parseFloat(item.latlng.longitude)
  }
}));

// 用扩展运算符复制原state，替换markers
this.setState(prevState => ({
  ...prevState,
  markers: processedMarkers
}));

追加新Markers到原数组 #

用扩展运算符合并新旧数组，生成一个新数组：

this.setState(prevState => {
  const processedMarkers = jsonResponse.map((item, index) => ({
    key: prevState.markers.length + index + 1, // 保证key不重复
    latlng: {
      latitude: parseFloat(item.latlng.latitude),
      longitude: parseFloat(item.latlng.longitude)
    }
  }));
  
  return {
    ...prevState,
    markers: [...prevState.markers, ...processedMarkers] // 合并新旧数组
  };
});

更新特定的Marker（可选） #

如果你的需求是更新某个已存在的marker（比如根据key匹配），可以这样写：

// 假设要更新key为1的marker，用接口返回的第一个数据
this.setState(prevState => {
  const targetMarker = prevState.markers.find(m => m.key === 1);
  const updatedMarker = {
    ...targetMarker,
    latlng: {
      latitude: parseFloat(jsonResponse[0].latlng.latitude),
      longitude: parseFloat(jsonResponse[0].latlng.longitude)
    }
  };
  
  return {
    ...prevState,
    markers: prevState.markers.map(m => m.key === 1 ? updatedMarker : m)
  };
});

几个关键注意点 #

• 坐标类型转换：一定要把接口返回的字符串坐标转成数字，和初始state的类型保持一致，不然地图渲染或者后续计算容易出问题。
• key的唯一性：每个marker的key必须唯一，最好用后端返回的唯一标识，用索引的话要注意数组变化时的稳定性。

内容的提问来源于stack exchange，提问作者Engin Yilmaz