React开发黑杰克APP时子组件未正确重渲染问题求助

• 更新playerHand状态时直接修改了原数组，React的状态更新采用浅比较逻辑，只要数组的引用地址没有变化，就会判定状态未发生更新，因此不会触发组件重渲染。
• 调用push方法仅修改了原数组的内容，所以控制台能打印出修改后的数组，但由于数组引用没有变化，React不会触发重渲染流程。
• 子组件PlayerHand中通过useEffect监听props.playerHand的变化，由于props的引用没有变化，useEffect不会触发，内部的hand状态也不会更新，因此无法渲染新的手牌。
• 按下Ctrl+S后组件正常更新是开发环境热重载的特性，热重载会强制组件重新挂载并读取最新的状态值，不属于正常的状态更新逻辑。

1. 修正状态更新逻辑 #

修改App.js中的hit函数，创建新的数组引用再更新状态，不要直接修改原数组：

const hit = () => {
  socket.emit('hit', roomName, function(newCard){
    // 使用函数式更新+扩展运算符生成新数组，保证引用变化触发重渲染
    updatePlayerHand(prevHand => [...prevHand, newCard]);
  });
}

你也可以使用concat方法实现相同效果：updatePlayerHand(playerHand.concat(newCard))，两种写法都会生成新的数组引用，能够触发React的重渲染。

2. 优化子组件（可选） #

PlayerHand组件不需要额外维护内部状态和useEffect监听props，直接使用传入的props渲染即可，既简化代码也避免出现状态同步问题：

import React from 'react';
import cards from './exports';
function PlayerHand (props){
    return (
        <div>
            {/* 给map遍历的元素添加key属性，避免React渲染警告 */}
            {props.playerHand.map((card, index) => (
              <img key={index} src={cards[card]} alt="card" className="card"/>
            ))}
        </div>
    )
}
export default PlayerHand;

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