Estoy creando una aplicación de blackjack y tengo problemas para volver a representar las manos después de las manos iniciales. Estoy tratando de actualizar mi estado en App.js y pasarlo a PlayerHand.js para que se procese, pero el componente secundario no se vuelve a representar, aunque un archivo console.log muestra que el estado se ha actualizado en App. Curiosamente, si presiono ctrl-s en mi editor de texto, PlayerHand.js se actualizará, incluso si no he cambiado nada en el código.

Aplicación.js

 function App() { const [lobbyState, updateLobbyState] = useState(''); const [playerHand, updatePlayerHand] = useState([]); //code that updates my state const hit = () => { socket.emit('hit', roomName, function(newCard){ hit console.log('old player hand is ' + playerHand); var newHand = playerHand; newHand.push(newCard); updatePlayerHand(newHand); console.log('new player hand is ' + playerHand); //this shows a different hand than the first print statement }); } //renders initial hands; seems to be working, but included in case it's relevant socket.on('initialHands', (data) => { updateRoomName(data.roomName); var newHand = data.playerHand; updatePlayerHand(newHand); updateOpponentHand(opponentHand.concat([data.opponentFirstCard, 'back'])); updateLobbyState('started'); }) switch(lobbyState){ case 'started': return ( <div className="lobby"> <OpponentHand opponentHand = {opponentHand}/> <PlayerHand playerHand = {playerHand} /> {currentPlayer ? <PlayerActions hit={hit} stand={stand} /> : <h1> Not your turn </h1>} </div> ) case 'waiting': return ( <Waiting /> ) default: return ( <Home createRoom={createRoom} joinRoom={joinRoom} /> ) }

PlayerHand.js

 import React, {useState, useEffect} from 'react'; import cards from './exports'; function PlayerHand (props){ const [hand, updateHand] = useState([]); useEffect(() => { var newHand = props.playerHand; updateHand(newHand); }, [props.playerHand]); return ( <div> {hand.map((card) => (<img src={cards[card]} alt="card" className="card"/>))} </div> ) } export default PlayerHand;