React组件中复制state异常：副本保留上次修改的属性

看起来你碰到了个有点反直觉的问题——明明每次调用函数都从state里的currentQuery重新复制对象，但第二次调用时params居然还带着上次加的test键。咱们来一步步拆解解决：

先直接修复复制逻辑 #

你现在用Object.assign({}, currentQuery)做浅拷贝本身逻辑没问题，但换用对象展开运算符创建副本，能更直观地确保每次都是全新的对象，避免一些隐性的引用混淆：

fetchNewThumbnails = () => {
  const { publicationsFilter, currentQuery } = this.state;
  // 用展开运算符创建currentQuery的浅拷贝，每次调用都生成新对象
  const params = { ...currentQuery };
  
  console.log("初始params:", params);
  console.log("当前state里的currentQuery:", currentQuery);
  
  if (publicationsFilter !== 'All') {
    params.test = 'test';
  }
  // 这里发起你的Ajax请求
}

为什么会出现这个奇怪的情况？ #

按你描述的日志，currentQuery每次都是干净的（没有test键），那理论上复制出的params也应该是干净的。可能的隐性原因有两个：

• publicationsFilter状态更新不及时：React的setState是异步的，如果你在设置publicationsFilter为'All'后立刻调用fetchNewThumbnails，可能state还没完成更新。这时候建议用setState的回调函数确保状态更新后再执行请求：

  this.setState({ publicationsFilter: 'All' }, () => {
    this.fetchNewThumbnails();
  });
  

• 意外的闭包缓存：虽然你用了箭头函数，但如果这个函数被缓存逻辑包裹（比如React.memo或自定义缓存），可能会捕获到旧的变量。不过这种情况比较少见，优先检查上面的状态更新问题即可。

额外提醒：嵌套对象的拷贝注意事项 #

看你补充的currentQuery结构带有嵌套的filter对象，如果以后需要修改params.filter里的属性，浅拷贝就不够用了（会直接修改到state里的原对象），这时候需要用深拷贝：

// 简单深拷贝（注意：会丢失函数、Symbol等特殊类型）
const params = JSON.parse(JSON.stringify(currentQuery));

// 或者用lodash的cloneDeep（如果项目已引入lodash）
// import cloneDeep from 'lodash/cloneDeep';
// const params = cloneDeep(currentQuery);

内容的提问来源于stack exchange，提问作者red house 87