React状态重置问题咨询：disabledItems与wordToGuess无法重置原因

嘿，这个问题我之前踩过坑！确实是JavaScript引用类型的特性在搞鬼，咱们一步步拆解来看：

为什么第一种写法会失效？ #

核心问题出在浅拷贝导致的引用共享，以及可能的「固定值复用」：

1. 引用类型的浅拷贝陷阱
   当你定义DEFAULT_STATE时，如果里面包含数组（比如disabledItems: []）或者对象类型的wordToGuess，用扩展运算符...DEFAULT_STATE初始化state时，做的是浅拷贝——也就是说，this.state.disabledItems和DEFAULT_STATE.disabledItems指向内存中的同一个数组。

   如果你的代码里不小心直接修改了this.state.disabledItems（比如this.state.disabledItems.push('x')，这是React严格禁止的操作！），你其实是在修改DEFAULT_STATE里的原始数组。等你调用resetGame重置时，用的已经是被改乱的数组，自然没法回到初始的空状态。

2. 固定值的复用问题（针对wordToGuess）
   如果DEFAULT_STATE里的wordToGuess是定义时就生成的固定值（比如const DEFAULT_STATE = { wordToGuess: generateRandomWord() }），那这个值只会生成一次。每次调用resetGame时，你都是把state重置为同一个旧单词，而不是新生成随机单词，看起来就像「没重置成功」。

第二种写法为什么正常？ #

当你在构造函数和resetGame里直接写disabledItems: []和wordToGuess: generateRandomWord()时，相当于每次都创建全新的引用类型值：

• 每次初始化/重置，disabledItems都是一个新的空数组，和之前state里的数组没有任何引用关联；
• wordToGuess每次都会调用生成函数，得到全新的随机单词。
  自然就不会有引用共享或固定值的问题，重置行为完全符合预期。

修复第一种写法的方案 #

如果你想保留DEFAULT_STATE的写法，只需要改成「函数生成默认状态」，避免引用共享：

// 用函数返回默认状态，每次调用都生成新的引用类型值
const getDefaultState = () => ({
  disabledItems: [],
  wordToGuess: generateRandomWord(), // 每次调用都生成新单词
});

// 构造函数中初始化
constructor(props) {
  super(props);
  this.state = getDefaultState();
}

// 重置时调用函数获取新的初始状态
resetGame() {
  this.setState(getDefaultState());
}

另外还要记住React的核心规则：永远不要直接修改this.state里的值，更新数组/对象类型的状态时，一定要创建新的实例，比如：

// 正确更新disabledItems的方式
this.setState(prevState => ({
  disabledItems: [...prevState.disabledItems, 'newItem'],
}));

内容的提问来源于stack exchange，提问作者Jérémie S.