React 18.2中useState更新数据后视图未正常渲染问题

核心问题 #

你的代码中updateGameLetter函数直接修改了原状态数组的引用，导致React无法检测到状态变化，因此视图不会自动更新。而adLetter函数能正常触发视图更新，是因为它创建了新的数组副本。

具体分析 #

• const workArray:GameLetter[] = game_letters; 这行代码只是将状态数组的引用赋值给workArray，两者指向同一个内存地址的数组
• 修改workArray[index].val=val时，本质是在修改原状态数组中的对象，没有创建新的数组或对象实例
• 调用setGameLetters(workArray)时，由于数组引用和之前的状态完全一致，React的状态更新机制会判定状态未发生变化，因此不会触发组件重新渲染

修复方案 #

修改updateGameLetter函数，通过创建新的数组和对象副本，让React能感知到状态变化：

方案1：使用map创建新数组 #

const updateGameLetter = (val:string, index:number)=>{
  if(letter_of_rec[index]===val){    
    // 遍历数组，仅修改目标索引的对象为新实例
    const workArray = game_letters.map((item, idx) => 
      idx === index ? {...item, val: val} : item
    );
    setGameLetters(workArray);
  }
};

方案2：展开运算符拷贝数组与对象 #

const updateGameLetter = (val:string, index:number)=>{
  if(letter_of_rec[index]===val){    
    // 先拷贝整个数组
    const workArray = [...game_letters];
    // 再拷贝目标索引的对象并修改val属性
    workArray[index] = {...workArray[index], val: val};
    setGameLetters(workArray);
  }
};

额外优化建议 #

onHandleAttempt函数中的letter_of_rec.forEach会遍历整个数组，若存在重复字母会多次调用updateGameLetter，可以用findIndex优化：

const onHandleAttempt = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
  if (/[a-zA-Z]/.test(event.target.value)) {
    const attempt = event.target.value;
    const matchIdx = letter_of_rec.findIndex(val => val === attempt);
    if (matchIdx !== -1) {
      updateGameLetter(attempt, matchIdx);
    }
  }
};

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