如何使用條件和 React Hooks 設置隨機初始狀態？

Question

此示例模擬拋硬幣。
我想隨機化硬幣的初始狀態。 第一次加載頁面時，它可能會顯示頭像。 下一次，尾巴。 為此，我使用 Math 方法生成的隨機數和一個條件來根據隨機數確定硬幣的正面（偶數表示正面，奇數表示反面）。
該值需要在初始渲染時顯示。

我還想使用 React 的 Hooks 將值存儲在狀態中，以便稍后在我的應用程序中使用。 如何使用鈎子設置隨機初始狀態值？

這是我正在使用的代碼。 它目前不起作用，我不確定我在做什么不正確來實現我的目標：

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;

我是 hooks 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具有不同的值，使用此設置的方法是重新安裝組件（重新加載頁面）。

狀態掛鈎文檔