时间戳

首页 > 解决方案 > React - object.assign 状态未按预期工作

reactjs - React - object.assign 状态未按预期工作

问题描述

我想在 M 时刻捕获我的状态“GeoJson”的值，所以这就是我所做的：

const prevGeoJson = Object.assign({}, this.state.geoJson);
const geoJson = Object.assign({}, this.state.geoJson);
geoJson.features.push(data);

this.setState(prevState => ({
  prevGeoJson: prevGeoJson,
  geoJson: geoJson,
  currentMarker: data
}));

但是， 的值与this.state.prevGeoJson具有相同的值this.state.GeoJson。我想这是 Object.assign 的正常行为，但不明白为什么，解决方案是什么？

标签： reactjsstate

解决方案

Object.assign 只会做一个对象的浅拷贝。这意味着features数组仍然是变异的。

请参阅此处的文档，并阅读其中的“深度克隆警告”。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

请参阅此答案以获取深度克隆对象的帮助：在 JavaScript 中深度克隆对象的最有效方法是什么？

没有任何形式的库的最简单方法是这样的：

const prevGeoJson = JSON.parse(JSON.stringify(this.state.geoJson));
const geoJson = JSON.parse(JSON.stringify(this.state.geoJson));
geoJson.features.push(data);

this.setState(prevState => ({
  prevGeoJson: prevGeoJson,
  geoJson: geoJson,
  currentMarker: data
}));

这将通过将对象转换为 JSON 字符串然后将其转换回新对象来对对象进行深层复制。

如果您不介意使用库，那么我会cloneDeep在这里建议 lodash 的方法：https ://lodash.com/docs/4.17.10#cloneDeep

我希望这有帮助。

推荐阅读