如何使用条件和 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 具有不同的值，则使用此设置的方法是重新安装组件（重新加载页面）。

State hooks docs