Как я могу установить рандомизированное начальное состояние, используя условные и React Hooks?

Question

Этот пример имитирует бросок монеты.Я хотел бы рандомизировать начальное состояние монеты.При первой загрузке страницы могут отображаться заголовки.В следующий раз хвосты.Для этого я использую случайное число, сгенерированное методом Math, и условное выражение для определения лицевой стороны монеты на основе случайного числа (четное число показывает головы, нечетное показывает хвосты).Значение должно отображаться при первоначальном рендеринге.

Я также хочу сохранить значение в состоянии, используя зацепки React для использования позже в моем приложении.Как я могу установить рандомизированное значение начального состояния с помощью хуков?

Вот код, с которым я работаю.В настоящее время он не работает, и я не уверен, что я делаю неправильно для достижения своей цели:

import React, { useState } from 'react';
import './App.css';

function App() {

  const [coin, setCoin] = useState(randomizePlayer())

  const randomizePlayer = () => {
    let number = Math.floor(Math.random() * 10) + 1
    return (number % 2 === 0) ? setCoin('Heads') : setCoin('Tails')
  }

    return (
      <div className="App">
        The coin is showing {coin}
      </div>
    );
  }

export default App;

Я новичок в API хуков и использую это упражнение для обучения.

Любая помощь приветствуется!

Answer 1

Я бы переписал этот код следующим образом:

const randomizePlayer = () => {
  const number = Math.floor(Math.random() * 10) + 1
  return (number % 2 === 0) ? 'Heads' : 'Tails'
}

function App() {
  const [coin, setCoin] = useState(randomizePlayer())

  return (
    <div className="App">
      The coin is showing {coin}
    </div>
  );
}

randomizePlayer не нужно звонить setState; цель useState состоит в том, чтобы установить состояние с любым полученным аргументом.

Также, чтобы уточнить: useState вызывается только один раз. Если вы хотите, чтобы coin имел другое значение, способ сделать это с помощью этой настройки - перемонтировать компонент (перезагрузить страницу).

State перехватывает документы