Valtio切换active对象时已修改状态未重置问题求助

问题根源 #

你遇到的问题是因为first、second是引用类型，store.active和store.saved中的元素指向同一个对象实例。修改active.value时，会直接改动saved里对应的对象，导致下次切换回来时，值是修改后的状态。

解决思路 #

要实现仅修改当前active对象，切换时始终加载原始值，需要让active成为原始模板数据的独立副本，而非直接引用原始对象：

1. 单独存储一份不可修改的原始模板数据；
2. 初始化和切换active时，都基于原始模板创建新的副本；
3. 展示选项列表时，使用原始模板的数值，确保用户看到的是初始值。

修改后的完整代码 #

import { proxy, useSnapshot } from "valtio";

// 存储原始基准数据，作为不可修改的模板
const templates = {
  first: { name: "First", value: 1 },
  second: { name: "Second", value: 2 }
};

const initState = {
  // 初始active为模板的副本，避免引用原始对象
  active: { ...templates.first },
  // 选项列表展示原始模板数据
  saved: Object.values(templates)
};
const store = proxy(initState);

export default function App() {
  const snap = useSnapshot(store);
  return (
    <div>
      <h2>Active:</h2>
      <p>Name: {snap.active.name}</p>
      <p>Value: {snap.active.value}</p>
      <button onClick={() => store.active.value++}>Increment</button>
      <br />
      <h2>Options:</h2>
      <ul>
        {snap.saved.map((template) => (
          <li
            key={template.name}
            onClick={() => {
              // 切换时创建模板的新副本，确保每次都是原始值
              store.active = { ...template };
            }}
          >
            {template.name} - {template.value}
          </li>
        ))}
      </ul>
    </div>
  );
}

关键修改点 #

• 使用templates存储原始数据，保证基准值不会被修改；
• 初始化和切换active时，通过{...template}创建浅拷贝（如果是复杂嵌套对象，可改用structuredClone实现深拷贝）；
• 选项列表直接展示模板的原始value，让用户清晰看到每个选项的初始状态。

这样操作后，每次切换active都会加载原始值，修改当前active的value不会影响其他选项的原始数据，完全符合需求。

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