React父组件更新props后子组件样式未更新问题求助

后端基于socket.io、Node.js、Express搭建，已确认socket.emit("team_set", gameInfo);能正常向目标客户端发送广播。客户端App.js监听该事件后更新状态并传递给多层子组件，但子组件的CSS样式未按预期更新。

相关代码 #

App.js #

const [teamStyle, setTeamStyle] = useState({}); // CSS样式对象
const [seats, setSeats] = useState([]);
useEffect(() => {
    socket.on("team_set", (gameInfo) => {
      setTeamStyle(gameInfo.teamStyle);
      setSeats(gameInfo.seats);
      setGameStarted(true);
      console.log("team set called: ", gameInfo.teamStyle, gameInfo.seats);
    });

    return () => {
      socket.off('team_set'); 
    };
  }, []);
  ...

  return (
    <GameScreen
        socket={socket}
        username={username}
        seats={seats}
        teamStyle={teamStyle}
        numPlayers={numPlayers}
        gameStarted={gameStarted}
    />

GameScreen.jsx #

...
return (
    <div className="gameScreen">
      <div>
        <PlayerBox 
          seats={seats}
          teamStyle={teamStyle} 
          numPlayers={numPlayers} 
          gameStarted={gameStarted}
        />
      ...

export default memo(GameScreen);

PlayerBox.jsx #

return (
  <Player teamStyle={teamStyle}/>

Player.jsx #

function Player(teamStyle) {  
  return (
    <div style={teamStyle}>
      <Fist />
    </div>
  )
}

export default memo(Player);

问题原因及修复方案 #

1. 核心问题：Player组件props接收错误 #

React组件的props是一个对象，当前Player组件直接将teamStyle作为参数，实际拿到的是整个props对象，而非传入的teamStyle属性。这导致style绑定的是整个props，不是预期的样式对象。

修复代码：

// 解构props获取teamStyle
function Player({ teamStyle }) {  
  return (
    <div style={teamStyle}>
      <Fist />
    </div>
  )
}

export default memo(Player);

或通过props对象访问：

function Player(props) {  
  return (
    <div style={props.teamStyle}>
      <Fist />
    </div>
  )
}

export default memo(Player);

2. 额外验证点 #

• 确认gameInfo.teamStyle是合法的React内联样式对象，格式应为{ color: 'red', backgroundColor: '#fff' }（驼峰命名CSS属性），而非CSS类名或其他格式。
• 若修复后仍有问题，可检查memo的浅比较逻辑：如果teamStyle是嵌套对象，memo的默认浅比较无法检测内部属性变化，此时需传入自定义比较函数：

  import { memo } from 'react';
  
  const compareProps = (prevProps, nextProps) => {
    // 深度比较teamStyle的属性
    return Object.is(prevProps.teamStyle.color, nextProps.teamStyle.color) &&
           Object.is(prevProps.teamStyle.backgroundColor, nextProps.teamStyle.backgroundColor);
  };
  
  export default memo(Player, compareProps);
  

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