Javascript 当其分配的变量被更改或更新时，react 状态将被更新

发布于12月11日

我有一个状态formData，其中mappedColumn是如下对象之一

const [formData, setFormData]=useState({
               mappedColumns:[
               {
                 source:"MAIN SOURCE",
                 target:"MAIN TARGET",
                 transformationValue:"MAIN VALUE"
               }
              ]
            })

var targetIndex = 0;
let mappingConfig = [...formData.mappedColumns];
var mIndex = mappingConfig.findIndex(function(p){ return p.target== targetIndex})
mappingConfig[mIndex].source = 'source';
mappingConfig[mIndex].transformationValue = 'value';

当我对变量mappingConfig进行任何更改时，实际的状态变量formData.mappedColumns将使用赋给mappingConfig的任何值进行更新.为什么会发生这样的事情.解决这个问题的办法是什么？有谁请帮帮忙！！

推荐答案

您描述的行为很可能是由于这样一个事实，即Java中的对象是按引用而不是按值赋值的.当您执行let mappingConfig=[...formData.mappdColumns]；时，您正在创建数组的浅表副本，但数组中的对象仍然是对内存中相同对象的引用.因此，当您在mappingConfig中修改对象的属性时，实际上是在修改formData.mappdColumns中的相同对象.

若要避免此问题，应在数组中创建对象的深层副本，以确保对一个对象的更改不会影响另一个对象.实现深度复制的一种方法是对数组和其中的对象使用spread运算符.

下面是一个如何在您的 case 中创建深度副本的示例:

 const [formData, setFormData] = useState({
  mappedColumns: []
});

var targetIndex = 0;
let mappingConfig = formData.mappedColumns.map(obj => ({ ...obj })); // Deep copy

var mIndex = mappingConfig.findIndex(function (p) {
  return p.target === targetIndex;
});

mappingConfig[mIndex].source = 'source';
mappingConfig[mIndex].transformationValue = 'value';

// Now update the state with the new array
setFormData({
  ...formData,
  mappedColumns: mappingConfig
});

在本例中，map(obj=>；({...obj}))用于创建具有深度复制对象的新array.这样，对mappingConfig的更改不会影响原始的formData.mappdColumns.最后，在使用setFormData更新状态时，使用更新的mappdColumns数组创建一个新对象，以确保状态更新触发重新呈现.

Javascript 当其分配的变量被更改或更新时，react 状态将被更新

推荐答案

Javascript相关问答推荐

如何通过在提交时工作的函数显示dom元素？

使用print This时， map 容器已在LeafletJS中初始化

如何访问Json返回的ASP.NET Core 6中的导航图像属性

硬币兑换运行超时

. NET中Unix时间转换为日期时间的奇怪行为

Redux查询多个数据库Api reducerPath&

扫描qr code后出错whatter—web.js

D3 Scale在v6中工作，但在v7中不工作

PrivateRoute不是路由组件错误

colored颜色检测JS，平均图像 colored颜色检测JS

Mongoose post hook在使用await保存时不返回Postman响应

Webpack在导入前混淆文件名

在画布中调整边上反弹框的大小失败

处理TypeScrip Vue组件未初始化的react 对象

通过跳过某些元素的对象进行映射

在GraphQL解析器中修改上下文值

JavaScript将字符串数字转换为整数

按特定顺序将4个数组组合在一起，按ID分组

正则表达式以确定给定文本是否不只包含邮箱字符串

使用重新 Select 和对象理解 Select 器备忘