Обновление содержимого JSX в React Js с помощью хуков

Question

Я делаю игру на память с React Js, но я не могу обновить игровое поле, когда перетасовываю свои карты. Это проект:

1. Я создал массив с именами карт, как это:

export default ["Earth","Jupiter","Mars","Mercury","Moon"...

Я создал функцию для обновления и перемешивания этого массива, используя useState:

const [board, setBoard] = useState(CardData.sort(() => Math.random() - 0.5));

function ResetBoard() {
    setBoard(board.sort(() => Math.random() - 0.5));
    console.log(board);
}

Вызовите ResetBoard () на моей кнопке:

<button className="retry-btn" onClick={ResetBoard}>

Визуализация платы в моем коде JSX:

<div className="card-section">
    {board.map((Card) => (
       <div className="card" key={Card}>
           <img
            src={require(`../assets/cards/${Card}.png`)}
            alt="Cards"
            width="100px"
            height="100px"/>
       </div>
     ))}
</div>

Но когда я нажимаю кнопку сброса, состояние моей платы меняется (в консоли), но интерфейс не меняется.

Answer 1

Вам не нужно useEffect в рендере.

const [board, setBoard] = useState(CardData.sort(() => Math.random() - 0.5));

function ResetBoard() {
    setBoard(CardData.sort(() => Math.random() - 0.5)); // use CardData.sort to reset the board state
}

.......

<div className="card-section">
    {board.map(Card => (
        <div className="card" key={Card}>
           <img
            src={require(`../assets/cards/${Card}.png`)}
            alt="Cards"
            width="100px"
            height="100px"/>
        </div>
     ))}
</div>

console.log(board) сразу после setBoard не вернет обновленное состояние, поскольку обновления состояния имеют асин c характер.

Answer 2

Это мое решение:

const [board] = useState(CardData.sort(() => Math.random() - 0.5));

function shuffleBoard(event) {
    event.preventDefault();
    history.push("/game");
  }

Это работает какое-то время.

Спасибо всем, кто мне помог.